babel-plugin-veui
Advanced tools
Changelog
1.0.0-alpha.21
NumberInput
中 value
和 localValue
的同步问题。<!-- #NumberInput -->Overlay
组件 target
属性类型声明在 SSR 下报错的问题。<!-- #Overlay -->Table
组件在系统有滚动条时的表头宽度。<!-- #Table -->row
属性指定 Textarea
组件高度时在 IE 下无视行高的问题。<!-- #Textarea -->Alert
组件图标在 IE 下没有垂直居中的问题。<!-- #Alert -->Slider
组件在有多按钮时在 IE 下不能正常工作的问题。<!-- #Slider -->Tree
、DatePicker
有时在鼠标操作时误显示聚焦样式的问题。<!-- #Tree #DatePicker -->Tabs
中使用 offsetWidth
的精度问题导致 active
和 index
切换失效的问题。<!-- #Tabs -->Changelog
1.0.0-alpha.20
Searchbox
新增了 suggestions-before
与 suggestions-after
两个插槽。<!-- #SearchBox -->Searchbox
提示层只在选择选项后关闭,如果点击自定义插槽而非默认的选择选项时,提示层不再自动关闭。<!-- #SearchBox -->Tree
/ FilterPanel
/ Transfer
组件的增加了键盘交互。<!-- #Tree #FilterPanel #Transfer -->focus
或 activate
方法。<!-- #Checkbox #CheckboxGroup #DatePicker #Dialog #Dropdown #Input #NumberInput #Overlay #Radio #RadioButtonGroup #RadioGroup #RegionPicker #Schedule #SearchBox #Slider #Switch #Textarea #Uploader -->Tabs
及 Tab
组件,新增函数属性 matches(current, to)
来允许指定自定义的激活状态判断,不再需要手动在 Tabs
组件中控制 index
。Tab
组件的 matches
逻辑优先于上层 Tabs
组件中的 matches
。<!-- #Tabs #Tab -->tabs.matches
来允许全局自定义 Tab
组件 matches
属性的默认值。<!-- #Tabs -->Overlay
组件的 target
属性类型。<!-- #Overlay -->OptionGroup
组件的问题。<!-- #OptionGroup -->indeterminate
兼容性,而非在用到的组件 mounted
以后才判断,避免模拟的点击触发了已经定义的事件监听器。<!-- #Checkbox -->min
/ max
规则失效的问题。<!-- #NumberInput -->Changelog
1.0.0-alpha.19
[^] Uploader
组件上传请求响应经过 convert-response
函数转换后,需要提供给组件执行后续操作的数据结构有所调整。目前仍然兼容老版本格式,但将在 1.0.0
移除。<!-- #Uploader -->
迁移指南
原数据格式
成功:
{ "status": "success", "name": "...", "src": "..." }
失败:
{ "status": "failure", "reason": "..." }
新数据格式
成功:
{ "success": true, "name": "...", "src": "..." }
失败:
{ "success": false, "message": "..." }
[-] 移除了 managers/config
的 merge
与 mergeDefaults
方法,现在对于 Object
类型的配置项需要提供完整值。<!-- #veui -->
[^] Breadcrumb
组件的 default
作用域插槽重命名为 item
,因为 Vue 实际的 fallback 逻辑,所以避免使用同名的插槽和作用域插槽。<!-- #Breadcrumb -->
zh-Hans
与 en-US
locale。<!-- #veui -->veui-loader
新增支持通过 locale
选项配置要自动引入的语言包。<!-- #veui-loader -->veui-loader
新增支持通过 global
选项配置全局引入的模块。<!-- #veui-loader -->managers/config
模块的配置现在为响应式数据,支持在组件渲染后进行全局修改。<!-- #veui -->Field
组件对应的数据字段名现在默认优先取 name
属性,且可以被 field
属性覆盖。<!-- #Field -->rule
模板占位符由 ${...}
变更为 {...}
,以方便在模板字符串中进行书写。老语法仍然保持兼容。<!-- #veui -->Calendar
、DatePicker
与 Schedule
的范围合并逻辑现在默认为“智能”模式,当用户从已选项开始选择范围时,将从整体已选范围中去除当前选区;当从未选项开始选择时,则将当前选区并入整体。<!-- #Calendar #DatePicker #Schedule -->Table
组件新增属性 scroll
,用来限定内容滚动区域的最大高度,设置时会使得表格的头/脚固定。<!-- #Table -->Table
组件新增属性 expandable
与 expanded
,用来支持行展开,且新增作用域插槽 sub-row
。<!-- #Table -->Column
组件新增作用域插槽 sub-row
。<!-- #Column -->Link
组件新增属性 rel
、target
,当 target
为 _blank
时自动为 rel
增加 noopener
值,以增强安全性。<!-- #Link -->veui-theme-one-icons
包。原 veui-theme-one/icons
下的图标依然保留。<!-- #veui-theme-one-icons @veui-theme-one -->GridContainer
的左右边距计算。<!-- #GridContainer -->Link
组件在默认模式下 disabled
未起效的问题。<!-- #Link -->Uploader
组件 remove
事件的回调参数 file
提供了错误的文件的问题。<!-- #Uploader -->ui
值不能直接输出的问题(#378)。<!-- #veui -->Changelog
1.0.0-alpha.18
3.1.2
。如果之前有在项目中直接使用 vue-awesome@2
的,需要升级到最新版,否则无法混用 VEUI 与 VueAwesome 的图标。<!-- #veui -->Tooltip
组件的 custom
属性被废弃,将在 1.0.0
移除。替代方式为:将 trigger
属性指定为 custom
来使用自定义逻辑控制打开及关闭。<!-- #Tooltip -->Pagination
组件内部所有的 class
中的 pager
被更名为 pagination
。如果在样式代码中进行过定制,请进行全局替换。<!-- #Pagination -->Uploader
组件的 progress
属性的 'number'
取值被替换为 'percent'
及 'detail'
,分别表示显示百分比及显示进度详情。进度详情将以 <code>`${loaded}KB/${total}KB`</code> 的形式输出。<!-- #Uploader -->Uploader
组件的属性 convert-response
函数必须返回转换后的数据对象。<!-- #Uploader -->ui
的功能,同时组件现在将自动继承父组件中可继承的 ui
字段,并更新了 veui-theme-one
中所有相应的部分。<!-- #veui #veui-theme-one -->Breadcrumb
组件的作用域插槽 default
新增属性 index
。<!-- #Breadcrumb -->Button
组件增加 ui
选项 dark
。<!-- #Button -->rule
的 validate
方法现在可以传入额外的上下文的数据,比如在 Field
验证时传入整个 Form
的 data
。<!-- #veui -->GridContainer
没有正确发布的问题。<!-- #GridContainer -->Slider
组件在有 step
时的选择逻辑,由向下选取点改为就近取点,且修正了 min
值非 0
时的逻辑。<!-- #Slider -->Uploader
组件无法正确获取全局配置的 uploader.convertResponse
函数的问题。<!-- #Uploader -->Changelog
1.0.0-alpha.17
Dialog
组件预设 ui
值 top
更名为 high
。<!-- #Dialog -->Button
组件再 loading
状态下将保留插槽内容,不再强行设置为 '加载中……'
。<!-- #Button -->$confirm
、$prompt
插件本来就无效的带状态唤起接口。<!-- #$confirm $prompt -->longpress
指令。<!-- #v-longpress -->Dropdown
组件增加了 trigger
属性,来指定何时展开下拉框。<!-- #Dropdown -->Dropdown
组件增加了 split
属性,来允许拆分指令按钮与下拉切换按钮。<!-- #Dropdown -->Button
组件增加了 mouseenter
/ mouseleave
事件。<!-- #Button -->NumberInput
组件支持长按调整值。<!-- #NumberInput -->GridContainer
/ GridRow
/ GridColumn
组件。<!-- #GridContainer #GridRow #GridColumn -->Progress
组件增加了预设 ui
值 fluid
,自适应容器宽度。<!-- #Progress -->Dialog
组件增加了预设 ui
值 small
/ large
/ auto
,用于指定预设宽度。<!-- #Dialog -->Overlay
/ Dialog
/ AlertBox
/ ConfirmBox
/ PromptBox
组件增加了 afterclose
事件。<!-- #Overlay #Dialog #AlertBox #ConfirmBox #PromptBox -->alert
/ confirm
/ prompt
/ toast
插件的接口,现在 $alert
/ $confirm
/ $prompt
/ $toast
均可直接作为函数调用。<!-- #$alert #$confirm #$prompt #$toast -->Tabs
组件移除标签时可能产生的问题。<!-- #Tabs -->ConfirmBox
没有正确触发事件的问题。<!-- #ConfirmBox -->Changelog
1.0.0-alpha.16
babel-preset-veui
,简化了引入 VEUI 一起进行转译所需的步骤。<!-- #babel-preset-veui -->date-fns
替换了对 moment
的依赖。<!-- #veui -->DatePicker
组件 panel
属性默认值错误的问题。<!-- #DatePicker -->Alert
组件样式。<!-- #Alert -->Breadcrumb
组件样式。<!-- #Breadcrumb -->Changelog
1.0.0-alpha.15
[^] 因为 less@2
依赖的包存在安全漏洞,故此次升级将对 less
的依赖升级到了 ^3.8.0
,对 less-plugin-est
的依赖升级到了 ^3.0.0
。<!-- #veui -->
迁移指南
- 更新
less
与less-plugin-est
的版本;- 如果使用
vue-cli
的webpack
模板初始化项目,请按如下方式修改build/utils.js
文件:- less: generateLoaders('less'), + less: generateLoaders('less', { javascriptEnabled: true }),
[^] Dialog
组件现在默认会在点击默认的按钮及按下 <kbd>esc</kbd> 键时关闭并通过 .sync
修饰符同步外部数据。并且新增 before-close
函数属性来处理需要阻止对话框关闭的情况。增加 default
/ foot
插槽的插槽属性 close
,用来在重写组件插槽时调用关闭逻辑。<!-- #Dialog -->
迁移指南
对于重写
foot
插槽处理关闭逻辑的使用方式,不会受新逻辑影响。对于监听
ok
/cancel
事件并直接关闭对话框时,亦不受此改动影响。当需要阻止对话框关闭时,需要使用新增的before-close
函数属性。
before-close
属性对应的函数类型为function(type: string): boolean=|Promise<boolean=>
,type
将会是Dialog
组件关闭操作的类型,默认情况下会有ok
与cancel
。返回值可以是一个boolean
,也可以是一个 resolveboolean
的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` 时会关闭对话框 }, // ... }
对于需要重写插槽(例如添加底部按钮等)的情况,可以使用新增的插槽属性
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)
。<!-- #Pagination -->
[^] 调整 FilterPanel
组件和 Tree
组件的对外接口参数名,统一将 options
/ option
更名为 items
/ item
。<!-- #FilterPanel -->
[^] 调整 resize
指令的默认每次都触发回调,增加 throttle
/ debounce
/ leading
三个 modifier。<!-- #v-resize -->
[^] 通过 prompt
manager 以指令式调用输入弹框功能时,现在返回的 Promise
在确认提交与取消时 resolve
的值分别是字符串和 null
,与原生全局 prompt
方法一致(原来是 { isOk: true, value }
与 false
)。<!-- #$prompt -->
[^] Button
组件加载中的文本修改为默认插槽的内容。<!-- #Button -->
[^] 调整 rule
出错信息变量模板匹配语法从 %{ruleValue}
修为 ${ruleValue}
,旧语法将在 1.0.0
移除。<!-- #veui -->
[^] Alert
组件新增 closable
属性,默认为 false
,显式指定后才会显示关闭按钮/文本,而非原来的始终显示关闭按钮/文本。<!-- #Alert -->
[^] Alert
组件的 close-text
属性更名为 close-label
,close-text
将在 1.0.0
移除。<!-- #Alert -->
Uploader
组件增加自定义上传模式。request-mode
新增可选值 custom
,设置为该值时,支持通过新增的属性 upload
自定义上传函数。<!-- #Uploader -->Uploader
组件增加切换动画。<!-- #Uploader -->Steps
组件的 click
事件回调参数增加原生事件对象 event
,现为 (index, event)
。<!-- #Steps -->Overlay
组件浮层根元素上现在增加了对 overlay.overlayClass
全局配置项对应类名的输出。<!-- #Overlay -->Switch
组件现在会透传与 Checkbox
组件一致的原生 DOM 事件。<!-- #Switch -->Toast
组件增加属性 open
,支持 .sync
。<!-- #Toast -->Toast
组件增加插槽 default
。<!-- #Toast -->Toast
组件增加全局配置 toast.duration
。<!-- #Toast -->Uploader
组件 iframe
模式中上传失败后重试时没有上传文件的问题。<!-- #Uploader -->Uploader
组件初始化后丢失 name
和 src
以外的自定义属性丢失的问题。<!-- #Uploader -->Overlay
组件中寻找最近父级浮层时,可能跨过太多层级的问题。<!-- #Overlay -->FilterPanel
组件在不展示搜索框的时候,内容区域高度不正确的问题。<!-- #FilterPanel -->Field
组件内部输入组件交互时数据同步导致校验不正确的问题。<!-- #Field -->Tabs
组件使用 label
插槽时的事件绑定问题。<!-- #Tabs -->Input
组件父级设置值为 null
后,仅格式化本地值为 ''
,未同步 ''
至父级的问题。<!-- #Input -->Steps
组件的多余外边距。<!-- #Steps -->Progress
组件多余的内边距。<!-- #Progress -->Progress
组件的 auto-succeed
属性的逻辑。<!-- #Progress -->NumberInput
组件的 min
/ max
属性有时失效的问题。<!-- #NumberInput -->Alert
组件多消息导航和关闭按钮不会同时显示的问题。<!-- #Alert -->alert
/ confirm
/ prompt
plugin 不能正常工作的问题。<!-- #$alert #$confirm #$prompt -->Table
组件 foot
插槽的渲染。<!-- #Table -->Changelog
1.0.0-alpha.14
Progress
组件的 state
属性更名为 status
。state
将在 1.0.0
移除。<!-- #Progress -->Schedule
组件的 shortcuts-display
属性值 expand
/ collapse
分别更名为 inline
/ popup
。旧的值将在 1.0.0
移除。<!-- #Schedule -->Schedule
组件的 header
插槽更名为 header-content
,新 header
插槽现在包括顶部内容的整个容器。<!-- #Schedule -->RegionPicker
组件的 datasource
属性中的 id
字段重命名为 value
,但 id
依然保留,优先使用 value
。<!-- #RegionPicker -->outside
指令解析数字值的逻辑。<!-- #v-outside -->Pagination
组件内的 Select
组件新增了 overlay-class
定义,方便自定义样式。<!-- #Pagination -->Switch
、Steps
、Schedule
、Table
、Fieldset
等组件的可访问性,实现了键盘交互。<!-- #Switch #Steps #Schedule #Table #Fieldset -->dropdown
mixin 中多余的默认 overlay-options
约束条件,修正某些场景下的浮层展开的默认方向。<!-- #DatePicker #Dropdown #SearchBox #Select -->Input
组件初始值为 null
时使用输入法会失效的问题。<!-- #Input -->Searchbox
组件在 suggestions
变化时会自动更新浮层位置。<!-- #SearchBox -->Label
组件激活同 Field
下的输入组件时,没有考虑组件禁用/只读状态的问题。<!-- #Label #Field -->Changelog
1.0.0-alpha.13
Checkbox
、Switch
组件新增属性 model
,对应 v-model
。checked
属性不再对应 v-model
,而是支持 .sync
。<!-- #Checkbox #Switch -->Checkbox
、Radio
、Switch
组件新增 input
事件用于 v-model
。change
事件参数抛出当前的 checked
值,仅在用户切换时触发。<!-- #Checkbox #Radio #Switch -->Calendar
组件的 selectstart
事件抛出的参数格式从 [Date]
修改为 Date
,表示选择的起始日期,去除多余的数组。<!-- #Calendar -->DatePicker
组件的 placeholderBegin
、placeholderEnd
属性及相应的插槽 placeholder-begin
、placeholder-end
,以及全局配置 datepicker.placeholderBegin
、datepicker.placeholderEnd
。取而代之的是,增加配置项 datepicker.rangePlaceholder
,并总是响应外部设置的 placeholder
属性。默认状态下,会根据 range
属性来显示 datepicker.placeholder
或 datepicker.rangePlaceholder
的值。<!-- #DatePicker -->DatePicker
组件的 date
作用域插槽现在会透传给内部的 Calendar
的同名作用域插槽,不再表示已选择日期区域。原来已选择位置的作用域插槽重命名为 selected
,为范围选择时;类型为 Date
的 date
字段废弃,取而代之的是三个类型为 number
的字段:year
、month
(0
表示一月)、date
;增加参数字段 position
,起止日期分别对应 from
和 to
。<!-- #DatePicker -->Carousel
组件的轮播项内容现在完全在作用域插槽 item
内部,不再在外部添加行内图片背景样式,方便自定义非图片类型的轮播项。<!-- #Carousel -->veui-loader
支持 webpack 4,resolve 路径逻辑调整为异步。<!-- #veui-loader -->RegionPicker
添加了键盘导航和 WAI-ARIA 支持。<!-- #RegionPicker -->BreadcrumbItem
和 Link
组件的 to
属性支持使用 Object
格式(以传递具名路由对象)。<!-- #BreadcrumbItem #Link -->DatePicker
组件增加 today
属性,和 Calendar
对应属性一致。<!-- #DatePicker -->DatePicker
组件的 format
属性现在可以传入函数,签名为 function(Date): string
。<!-- #DatePicker -->DatePicker
组件的 shortcuts
配置中,to
字段新增默认值 0
。<!-- #DatePicker -->Input
组件新增 WebKit 自动填充状态的判断,优化样式。<!-- #Input -->Tabs
新增 ui 值 block
,并带动画效果。<!-- #Tabs -->Tab
组件新增 status
属性。<!-- #Tab -->Tab
组件在路由模式下会自动渲染 <router-view>
。<!-- #Tab -->Tab
组件的属性 to
现在可以使用相对路径。<!-- #Tab -->resize
指令底层升级,切换到 resize-detecor
,并增加 debounce 优化。<!-- #v-resize -->RadioGroup
、CheckboxGroup
、RadioButtonGroup
及 CheckButtonGroup
组件的默认作用域插槽属性增加 index
表示选项序号。<!-- #RadioGroup #CheckboxGroup #RadioButtonGroup #CheckButtonGroup -->numeric
校验规则现在禁止多余的 0
开头的字符串值。<!-- #veui -->Select
组件的作用域插槽 label
现在作用域绑定到完整的已选中的 options
项,而非 { label }
。<!-- #Select -->autofocus
失效的问题。<!-- #veui -->Textarea
组件初始 value
为 null
时的问题。<!-- #Textarea -->Input
组件在 SSR 时报错的问题。<!-- #Input -->input
类型组件的错误状态通过组件数据进行传递,而不仅仅依赖于外层 Field
的 class
。<!-- #DatePicker #Input #NumberInput #Select #Textarea #Transfer -->Tab
使用路由模式时设置 name
属性会出错的问题。<!-- #Tab -->Table
的 update:selected
事件有时未正确抛出的问题。<!-- #Table -->Progress
组件属性校验的问题。<!-- #Progress -->OptionGroup
组件未将 disabled
传递给 Option
组件的问题。<!-- #OptionGroup -->Changelog
1.0.0-alpha.12
[^] Uploader
组件在 maxCount
的值是 1
的情况下,value
的默认类型从字符串改成对象,可以通过设置属性 compat
为 true
将 value
的类型设置为字符串兼容旧版本。compat
模式未来不会移除,但不建议使用。<!-- #Uploader -->
迁移指南
Uploader
在max-count
为1
时的value
属性数据类型修改为对象,和多文件时的数组项相同。需要兼容原字符串数据格式时,需要设置compat
属性为true
:<veui-uploader compat ... />
[^] 修改了 Radio
组件的 v-model
语义,现在机制和 Vue.js 对原生 <input type="radio">
的处理保持一致。<!-- #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
属性对 textarea
的支持。<!-- #Input -->
迁移指南
使用
Textarea
组件进行替代:<veui-textarea v-model="value" ... />
[^] 将 OptionGroup
的 position
属性的 popout
值重命名为了 popup
(与 aria-haspopup
保持一致)。将在 1.0.0
移除对 popout
的支持。<!-- #OptionGroup -->
[^] 将 Progress
组件的 precision
属性重命名为和 NumberInput
一致的 decimal-place
。precision
将在 1.0.0
移除。<!-- #Progress -->
[+] babel-plugin-veui
支持在 import
时为组件添加前缀,方便直接使用快捷写法定义组件的 components
选项。默认支持 veui-
和 v-
两种前缀。<!-- #babel-plugin-veui -->
<template> <div> <veui-button>确定 <v-icon name="check"></veui-button> </div> </template> <script> import { VeuiButton, VIcon } from 'veui' export default { name: 'my-component', components: { VeuiButton, VIcon } } </script>
[+] NumberInput
新增 max
/ min
属性,优先从直接父组件 Field
的属性 rule
中继承 max
/ min
rule 的值。<!-- #NumberInput -->
[+] Input
新增 clearable
属性,提供清除输入内容的功能;补充 placeholder
属性对 IE9 的支持。<!-- #Input -->
[^] Uploader
组件的事件 success
、failure
、remove
增加参数:当前处理文件的序号。<!-- #Uploader -->
[^] Uploader
组件在重新上传的时候不再触发 remove
事件。<!-- #Uploader -->
[^] 增加了 Select
、Dropdown
、Carousel
、Pagination
及 Progress
等组件的 WAI-ARIA 支持。<!-- #Select #Dropdown #Carousel #Pagination #Progress -->
Textarea
触发事件时没有正确处理 this
的问题。<!-- #Textarea -->NumberInput
在只读状态下可以用键盘上下键调整值的问题。<!-- #NumberInput -->outside
指令设置 delay
时未清除定时器的问题。<!-- #v-outside -->z-index
未更新完毕就展现造成的闪动问题。<!-- #Overlay -->