# 从 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