升级日志

veui-theme-dls 对组件的 ui prop 进行了调整，见下表。

其中，按钮默认样式变为 normal，原默认样式现对应为 basic。

将 ButtonGroup / RadioGroup / CheckboxGroup / RadioButtonGroup / CheckButtonGroup 组件的每个项目的作用域插槽从 default 更名为 item。后续使用时需要用 <template #item="...">...</template> 自定义项目内容。

移除了 GridContainer 组件的 flex prop，默认行容器均使用 flex 布局，不再按条件指定。

移除了 Input 组件的 prepend / append 插槽，并将 before / after 插槽移入 Input 内部。原有的前后组合的场景请使用 InputGroup 组件进行组合输入型组件使用。

NumberInput 组件的 prepend / append 插槽重命名为 before / after。

Progress 组件的 append 插槽重命名为 after。

Tree 组件的 item-prepend / item-append 插槽重命名为 item-before / item-after。

移除了 babel-preset-veui。

移除了 veui-theme-one。

移除了 Tabs 组件的 index prop，现在控制激活标签页只能使用 active prop，并支持可受控模式。

使用指南

使用 active prop 与 change 事件完全外部控制激活状态

<veui-tabs :active="active" @change="tab => active = tab.name">
  <veui-tab label="A" name="a">Content A</veui-tab>
  <veui-tab label="B" name="b">Content B</veui-tab>
  <veui-tab label="C" name="c">Content C</veui-tab>
</veui-tabs>

使用 active.sync 双向同步激活状态

<veui-tabs :active.sync="active">
  <veui-tab label="A" name="a">Content A</veui-tab>
  <veui-tab label="B" name="b">Content B</veui-tab>
  <veui-tab label="C" name="c">Content C</veui-tab>
</veui-tabs>

激活状态完全由组件内部控制

<veui-tabs>
  <veui-tab label="A">Content A</veui-tab>
  <veui-tab label="B">Content B</veui-tab>
  <veui-tab label="C">Content C</veui-tab>
</veui-tabs>

Tabs 组件的 tabs-extra slot 更名为 extra，且仅包括提示区域的内容，不包括添加按钮。

移除了 Tabs 组件的 tabs-extra-label 与 tabs-extra-tip slot。

Tabs 组件的 tab-item scoped slot 现在包含整个按钮/链接，方便替换为自定义实现。

移除了Tabs 组件的 tab-item-extra scoped slot，removable 的 Tab 组件始终显示移除按钮。

Tabs 组件在路由模式下，不再自动输出 <router-view> 组件，需要通过 Tab 的 default slot 或 Tabs 新增的 panel slot 中进行输出。

使用指南

（嵌套）路由模式

在之前的版本，如果 Tab 组件的 default slot 未传入任何内容，路由模式下 VEUI 会自动在标签内容容器内渲染 <router-view>。这导致在不使用嵌套路由时或是希望灵活控制 <router-view> 位置时产生额外的问题。所以在这个版本中移除了这个逻辑，用户可以使用 Tabs 的 panel slot 来统一在标签内容容器中输出 <router-view>，也可以在某些 Tab 的 default slot 中输出 <router-view> 及额外内容来覆盖全局的 panel slot，甚至可以将 <router-view> 输出到其它任意合适的位置。

<veui-tabs>
  <veui-tab label="A" to="content/a"/>
  <veui-tab label="B" to="content/b"/>
  <veui-tab label="C" to="content/c">
    <h3>Content C</h3>
    <router-view/>
  </veui-tab>
  <template #panel>
    <router-view/>
  </template>
</veui-tabs>

使用 Uploader 的 upload prop 自定义上传过程时，参数中的回调函数 onload / onprogress / onerror 中第一个参数 file 被移除，原来提供上传结果、进度或错误信息的第二个参数成为第一个参数。

迁移指南

原回调方法

function upload (file, { onload, onprogress, onerror }) {
  const xhr = new XMLHttpRequest()
  xhr.upload.onprogress = e => onprogress(file, e)
  xhr.onload = () => {
    onload(file, JSON.parse(xhr.responseText))
  }
  xhr.onerror = e => onerror(file, e)

  // ……实际上传操作……
}

新回调方法

function upload (file, { onload, onprogress, onerror }) {
  const xhr = new XMLHttpRequest()
  xhr.upload.onprogress = e => onprogress(e)
  xhr.onload = () => {
    onload(JSON.parse(xhr.responseText))
  }
  xhr.onerror = e => onerror(e)

  // ……实际上传操作……
}

Uploader 组件上传请求响应经过 convert-response 函数转换后，需要提供给组件执行后续操作的数据结构有所调整。目前仍然兼容老版本格式，但将在 1.0.0 移除。

迁移指南

原数据格式

成功：

{ "status": "success", "name": "...", "src": "..." }

失败：

{ "status": "failure", "reason": "..." }

新数据格式

成功：

{ "success": true, "name": "...", "src": "..." }

失败：

{ "success": false, "message": "..." }

移除了 managers/config 的 merge 与 mergeDefaults 方法，现在对于 Object 类型的配置项需要提供完整值。

Breadcrumb 组件的 default 作用域插槽重命名为 item，因为 Vue 实际的 fallback 逻辑，所以避免使用同名的 slot 和 scoped slot。

因为 less@2 依赖的包存在安全漏洞，故此次升级将对 less 的依赖升级到了 ^3.8.0，对 less-plugin-est 的依赖升级到了 ^3.0.0。

迁移指南

1. 更新 less 与 less-plugin-est 的版本；
2. 如果使用 vue-cli 的 webpack 模板初始化项目，请按如下方式修改 build/utils.js 文件：

-    less: generateLoaders('less'),
+    less: generateLoaders('less', { javascriptEnabled: true }),

Dialog 组件现在默认会在点击默认的按钮及按下 esc 键时关闭并通过 .sync 修饰符同步外部数据。并且新增 before-close 函数 prop 来处理需要阻止对话框关闭的情况。增加 default / foot slot 的 slot 参数 close，用来在重写组件 slot 时调用关闭逻辑。

迁移指南

对于重写 foot slot 处理关闭逻辑的使用方式，不会受新逻辑影响。

对于监听 ok / cancel 事件并直接关闭对话框时，亦不受此改动影响。当需要阻止对话框关闭时，需要使用新增的 before-close 函数 prop。

before-close prop 对应的函数类型为 function(type: string): boolean=|Promise<boolean=>，type 将会是 Dialog 组件关闭操作的类型，默认情况下会有 ok 与 cancel。返回值可以是一个 boolean，也可以是一个 resolve boolean 的 Promise，用来处理可能需要异步决定对话框关闭状态的情况。返回值或 resolve 值非 false 时才会关闭对话框。例如，如果我们要异步处理 ok，而对 cancel 直接关闭，可以按如下方式处理：

<veui-dialog :open.sync="dialogOpen" :before-close="submit"
  >...</veui-dialog
>

methods: {
  submit (type) {
    if (type === 'ok') {
      return axios.post('/item/create', {/* ... */})
        .then(({ id, error }) => {
          if (error) {
            this.showError(error)
            return false // resolve `false` 将阻止对话框关闭
          }
        })
    }
    // resolve 但不返回 `false` 时会关闭对话框
  },
  // ...
}

对于需要重写 slot（例如添加底部按钮等）的情况，可以使用新增的 slot 参数 close，类型为 function(type: string): void，使用者只需要在合适的时机自行调用 close 函数即可，type 默认支持 ok / cancel 并会透传到 before-close 的流程中。例如：

<veui-dialog :open.sync="dialogOpen" :before-close="submit">
  ...
  <template slot="foot" slot-scope="{ close }"
    ><button @click="close">OK</button></template
  >
</veui-dialog>

Pagination 组件的 redirect 事件回调参数从 ({ page, event }) 调整为 (page, event)。

调整 FilterPanel 组件和 Tree 组件的对外接口参数名，统一将 options / option 更名为 items / item。

调整 resize 指令的默认每次都触发回调，增加 throttle / debounce / leading 三个 modifier。

通过 prompt manager 以指令式调用输入弹框功能时，现在返回的 Promise 在确认提交与取消时 resolve 的值分别是字符串和 null，与原生全局 prompt 方法一致（原来是 { isOk: true, value } 与 false）。

Button 组件加载中的文本修改为默认 slot 的内容。

调整 rule 出错信息变量模板匹配语法从 %{ruleValue} 修为 ${ruleValue}，旧语法将在 1.0.0 移除。

Alert 组件新增 closable prop，默认为 false，显式指定后才会显示关闭按钮/文本，而非原来的始终显示关闭按钮/文本。

Alert 组件的 close-text prop 更名为 close-label，close-text 将在 1.0.0 移除。

Uploader 组件在 maxCount 的值是 1 的情况下，value 的默认类型从字符串改成对象，可以通过设置 prop compat 为 true 将 value 的类型设置为字符串兼容旧版本。compat 模式未来不会移除，但不建议使用。

迁移指南

Uploader 在 max-count 为 1 时的 value prop 数据类型修改为对象，和多文件时的数组项相同。需要兼容原字符串数据格式时，需要设置 compat prop 为 true：

<veui-uploader compat ... />

修改了 Radio 组件的 v-model 语义，现在机制和 Vue.js 对原生 <input type="radio"> 的处理保持一致。

迁移指南

此版本前的 Radio 组件的 v-model 对应 checked 属性，但由于之前的版本中存在多个同 name 的 Radio 组件时，被取消选中的单选框并不会响应数据变化，导致实际 v-model 并不完全可用。新版本在使用 v-model 的场景下修复了这个问题，并把逻辑和 Vue.js 对原生元素的处理方式进行了对齐。

<veui-radio value="html" name="lang" v-model="lang" />
<veui-radio value="css" name="lang" v-model="lang" />
<veui-radio value="javascript" name="lang" v-model="lang" />

通过将多个 Radio 组件的 v-model 绑定到同一个数据项，即可完成数据的双向绑定。注意，仍然建议使用 name 属性来正确表达分组。这将会影响元素的可访问性。

同时，更建议使用 RadioGroup 组件来实现单选组，因为它会有更简单的 API 和可访问性。

移除 Input 组件的 type prop 对 textarea 的支持。

迁移指南

使用 Textarea 组件进行替代：

<veui-textarea v-model="value" ... />

将 OptionGroup 的 position 属性的 popout 值重命名为了 popup（与 aria-haspopup 保持一致）。将在 1.0.0 移除对 popout 的支持。

将 Progress 组件的 precision prop 重命名为和 NumberInput 一致的 decimal-place。precision 将在 1.0.0 移除。

AlertBox 组件，之前只能通过 ui prop 传递类型信息（ success / error / info ），现在和 Toast 保持风格统一，使用 type prop 传递类型信息。

迁移指南

对于非如下两种情况的用户，本次变更并不产生影响。

1. 所有直接使用 AlertBox 的情况下，需要将如 ui="success" 修改为 type="success" 的方式进行指定。

2. 对于主题包的作者，需要将原来针对如 [ui~="success"] 编写的样式，修改为 .veui-alert-box-success。

[预告] Input 组件的 type prop 将在下个版本去除对 textarea 的支持，请使用 Textarea 组件代替。

将对 Vue 的依赖更新到 ^2.5.13。这使得使用 scoped slot 时，scope 需要改写为 slot-scope。由于 VEUI 内部已经使用 slot-scope，所以该版本无法与 vue@2.5.0 之前的版本一同使用。

迁移指南

请检查项目中所有用到

<template slot="..." scope="...">...</template>

的地方，统一替换为：

<template slot="..." slot-scope="...">...</template>

同时，由于 vue@2.5.3 修改了 slot 的逻辑，所以当代码中存在使用

<template slot="..."></template>

的写法来将 slot 内容置空时，现在会自动使用定义 slot 时备用内容填充而非置空，暂时的方法是使用一个零宽空格（​）来填充。

将对 wicg-focus-ring@2.x 的依赖更新为 focus-visible + classlist-polyfill，并且移入了 veui-theme-one 的 dependencies。使用 veui-theme-one 且需兼容 IE9 的项目需要同时引入这两个模块。同时 veui-theme-one 中的 .focus-ring 也均已升级为 .focus-visible。

迁移指南

• 在主模块中删除 `import 'wicg-focus-ring'；

• 安装上述包后，将引入语句替换为：

  import "classlist-polyfill";
  import "focus-visible";
  

去除了 veui-theme-one 中 Alert 组件默认的上下 margin。

Column 组件的 scoped slot head 和 foot 现在变更为 slot。

删除 veui-theme-dux。

删除 Field 组件 prop rules 默认可选表单校验规则 maxByte 和 minByte。

重构了 babel-plugin-veui 及 veui-loader 的逻辑，以支持服务端渲染时首屏样式的抽取。

迁移指南

• 删除 build/vue-loader.conf.js 中 preLoaders 中的 veui-loader 配置；

• 将 .babelrc 中的 veui 插件配置删除，整个只保留字符串 'veui'；

• 在 build/webpack.base.conf.js 中，重新配置 veui-loader：

{
  test: /\.vue$/,
  loader: 'veui-loader',
  enforce: 'pre',
  options: {
    modules: [
      {
        package: 'veui-theme-one',
        fileName: '${module}.less'
      },
      {
        package: 'veui-theme-one',
        fileName: '${module}.js',
        transform: false
      }
    ]
  },
  include: [resolve('veui'), resolve('vue-awesome')]
}

将 Pager 组件重命名为 Pagination。暂时保留兼容，Pager 将在 1.0.0 移除。