# 从WinDesign 1.x迁移

TIP

在迁移过程中，win-design@1.x 用户仅需要升级组件库至2.x 版本，并针对性处理升级差异（包括组件功能性差异、UI新规范差异等）即可。对于 element-ui 用户，win-design@2.x与element-ui@2.13.x二者之间已经做到完全隔离，互不影响，虽然已进行了全量 Api 兼容性工作，但仍建议采取渐进式迁移方式，分功能板块逐一进行迁移，以控制迁移风险。

# 组件差异

域名

基础组件名称域名(包括组件 dom 节点 class 前缀)由el-改为w-。

名称

大部分组件仅需要替换组件前缀即可实现第一步迁移工作，但有个别组件的名称需要特别修改。

组件名称	废弃组件	替代组件
`输入建议框`	~~el-autocomplete~~	w-input-suggestion
`对话框`	~~el-dialog~~	w-modal
`下拉菜单`	~~el-dropdown-item~~	w-dropdown-menu-item

重大变更

因功能需求，对某一些组件进行了功能性参数重构，win-design@1.x 用户需要注意一下以下组件的修改细节。

组件名称	重构属性	备注
`Menu菜单`	style-config	主要涉及参数名称与配置结构的变化

# 全局指令/方法

WARNING

在同时使用win-design与element-ui组件时，会发生全局指令/方法同名的情况(如挂载在 Vue 原型上的全局方法：$loading、$message、$msgbox、$alert、$confirm、$prompt、$notify 等，全局性指令v-loading), 为了避免在过渡时期出现全局指令/方法污染的情况，win-design@2.x版本之后，对全局指令/方法进行了命名规则修改。请开发者引起注意 ⚠️⚠️⚠️

类型	废弃名	替代名	备注
全局指令	~~v-loading~~	v-win-loading	-
全局方法	~~$message~~	$Message	挂载在 Vue原型上的方法均由小驼峰改为大坨峰的命名格式，包括`$Loading`、`$Message`、`$Msgbox`、`$Alert`、`$Confirm`、`$Prompt`、`$Notify`等。

全局指令

  <!-- before -->
  <w-table v-loading="loading">
    <!-- ... -->
  </w-table>

  <!-- now -->
  <w-table v-win-loading="loading">
    <!-- ... -->
  </w-table>

1
2
3
4
5
6
7
8
9

全局方法

  export default {
    methods: {
      globalMethods() {
        // before
        this.$loading({})
        this.$message({})
        this.$msgbox({})
        this.$alert({})
        this.$confirm({})
        this.$prompt({})
        this.$notify({})

        // now
        this.$Loading({})
        this.$Message({})
        this.$Msgbox({})
        this.$Alert({})
        this.$Confirm({})
        this.$Prompt({})
        this.$Notify({})
      }
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 废除属性

win-design@1.x版本的开发者，需要特别关注一下，升级win-design@2.x版本时，以下组件参数发生了重大改动。

组件名称	废弃属性	替代属性
`button`	~~ghost~~	—
`form`	~~sizes~~	size
`input-number`	~~hidden-controller~~	controls
`input-suggestion`	~~is-focus-trigger~~	trigger-on-focus
`timeline`	~~node-click~~	—
`badge`	~~offset~~	—
`badge`	~~showZero~~	—
`badge`	~~numberStyle~~	—
`badge`	~~title~~	—

# 兼容性

根据目前新产品项目实际对基础组件对使用情况, 针对element-ui@2.13.x和win-design@1.x进行API及功能进行了详细地对比, 对相同功能的属性或方法进行了兼容性处理, 仅为了保证element-ui的开发者以最小的成本迁移至win-design@2.x。具体兼容性问题的解决情况如下:

组件名称	原有属性/方法/事件	兼容属性/方法/事件
`breadcrumb`	`separator-icon-class`	separator-class
`breadcrumb`	`jump-to`	to
`pagination`	`current-pager`	current-page
`pagination`	`max-pager`	pager-count
`pagination`	`show`	layout
`pagination`	`@actived-change`	@current-change
`pagination`	`@to-prev`	@size-change
`pagination`	`@page-size-change`	@prev-click
`pagination`	`@to-next`	@next-click
`input-suggestion`	`fetch-suggestion-list`	fetch-suggestions
`input-suggestion`	~~is-focus-trigger~~	trigger-on-focus
`input-suggestion`	`append-to-body`	popper-append-to-body
`input-number`	`increment`	step
`input-number`	`strict-increment`	step-strictly
`input-number`	~~hidden-controller~~	controls
`form`	~~sizes~~	size
`form`	`label-align`	label-position
`form`	`@validateForm`	@validate
`badge`	`count`	value
`badge`	`overflow-count`	max
`badge`	`dot`	is-dot
`badge`	`status`	type
`menu`	`default-actived`	default-active
`menu`	`default-opened`	default-openeds
`menu`	`trigger`	menu-trigger
`dropdown`	`icon-trigger`	split-button
`popconfirm`	`@confirm`	@onConfirm
`popconfirm`	`@cancel`	@onCancel
`timeline`	`position`	placement
`timeline`	`time`	timestamp
`timeline`	`node-size`	size
`timeline`	`slot(node)`	slot(dot)
`drawer`	`drawer-class`	custom-class
`drawer`	`position`	direction
`drawer`	`@onClose`	@close
`drawer`	`@onOpen`	@open