Releases: ecomfe/veui
v1.0.0-alpha.35
💡 主要变更
- [^] 更新
date-fns
依赖到2.x
版本。
v2.0.0-alpha.13
💡 主要变更
- [+]
Autocomplete
组件新增了option-label
插槽。 - [+]
OptionGroup
组件新增before
/after
插槽,用于在popup
模式下在新开浮层上下插入自定义内容。
🐞 问题修复
- [^] 修复了
Tab
组件的label
等 prop 更新时视图没有同步更新的问题。 - [^] 修复了
Menu
组件数据源在 SSR 环境下无限循环的问题。 - [^] 修复了
Anchor
组件在 SSR 环境下访问 DOM 的问题。
v2.0.0-alpha.12
🐞 问题修复
- [^]
veui
现在在babel-plugin-veui
的peerDependencies
中,以免多版本共存时babel-plugin-veui
无法找到正确的veui
版本。 - [^] 修复了
Menu
组件非受控模式下第一次没有正确同步当前路由状态的问题。 - [^] 修复了
Calendar
组件disabled-date
prop 对显示在本月的前后月日期未生效的问题(#644)。 - [^] 现在
ButtonGroup
组件只有在按钮项value
为字符串时抛出同名事件,避免在非字符串类型时报错。 - [^] 去除了多选
Select
组件已选项默认滚动入可视区域的行为(因为可能有多个已选项)。 - [^] 修正了开启搜索功能的
Dropdown
组件搜索栏和选项区域同时滚动的问题,搜索栏现在固定在下拉菜单顶端。
v2.0.0-alpha.11
⚠️ 非兼容性变更
-
[-] 移除了
babel-preset-veui
。 -
[-] 移除了
veui-theme-one
。 -
[^] 对
Tabs
组件进行了重写,其中引入的非兼容性变更如下:- [-] 移除了
index
prop,现在控制激活标签页只能使用active
prop。 - [^]
tabs-extra
slot 更名为extra
,且仅包括提示区域的内容,不包括添加按钮。 - [-] 移除了
tabs-extra-label
与tabs-extra-tip
slot。 - [^]
tab-item
scoped slot 现在包含整个按钮/链接,方便替换为自定义实现。 - [-] 移除了
tab-item-extra
scoped slot,removable
的Tab
组件始终显示移除按钮。 - [^] 在路由模式下,不再自动输出
<router-view>
组件,需要通过Tab
的default
slot 或Tabs
新增的panel
slot 中进行输出。
其余变更:
-
[+] 新增了
tab-item-label
tab-label
scoped slot,用于仅自定义标签项内容。 -
[+] 新增
panel
slot,用于指定标签下方面板内的自定义内容。 -
[+] 新增
change
事件,回调参数为tab
对像,包含name
、label
、to
、status
等字段。 -
[+]
Tab
组件新增了item
slot,用于自定义标签内容,与Tabs
组件的tab-item
对应,优先级更高。 -
[+]
Tab
组件新增了label
slot,用于自定义标签内容,与Tabs
组件的tab-label
对应,优先级更高。使用指南
使用
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>
(嵌套)路由模式
在之前的版本,如果
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>
自定义标签项内容
可以使用
Tabs
的tab-item
scoped slot 来自定义所有标签项的内容,也可以使用Tab
的item
scoped slot 来自定义单个标签项内容(单个内容将覆盖整体的内容)。<veui-tabs> <veui-tab label="A"> Content A <template #item="tab"> <button type="button" class="foo-btn" :disabled="tab.disabled" v-bind="tab.attrs" @click="tab.activate" > {{ `${tab.label} ${tab.active ? '✅' : '' }` }} </button> </template> </veui-tab> <veui-tab label="B">Content B</veui-tab> <veui-tab label="C">Content C</veui-tab> </veui-tabs>
如果只想定义文本区域的内容(不需重写点击激活等逻辑),请使用
Tabs
的tab-label
或Tab
的label
scoped slot,用法类似。<veui-tabs> <veui-tab label="A"> Content A <template #label="tab">Content A {{ ${tab.active ? '✅' : '' }` }}</template> </veui-tab> <veui-tab label="B">Content B</veui-tab> <veui-tab label="C">Content C</veui-tab> </veui-tabs>
- [-] 移除了
🐞 问题修复
- [^] 修复了
Transfer
组件删除已选项时报错的问题。 - [^] 修复了
Transfer
组件和Tree
组件在被禁用状态下依然可以添加已选项的问题。 - [^] 修复了悬浮触发的
Tooltip
组件可能被错误关闭的问题。 - [^] 修复了在局部输出全局样式时没有正确处理
Anchor
浮层的问题。 - [^] 修复了
Overlay
组件没有响应inline
prop 变化的问题。 - [^] 修复了
NumberInput
组件在strong
模式下最大最小值没有正确工作的问题。
v2.0.0-alpha.10
⚠️ 非兼容性变更
-
[^] 使用
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
使用upload
prop 自定义上传过程时,如果返回一个函数,该函数将在用户操作取消或上传组件销毁时被调用,用来中断自定义上传过程。 - [^]
Uploader
没有通过文件类型校验、文件大小校验和自定义校验的文件现在会以上传失败的状态出现在文件列表中。 - [+]
Uploader
新增 proppicker-position
,支持图片上传模式下控制上传按钮始终保持在列表最前面还是最后面。 - [+]
Uploader
新增可供外部调用的方法addFiles
,支持通过函数直接添加并上传文件。 - [+]
Menu
组件新增了icon
/before
/after
三个插槽。
🐞 问题修复
- [^] 修复了使用
tabs-extra
插槽时由于插槽位置错误可能引起报错的问题。 - [^] 修正了
Menu
组件图标尺寸错误的问题。 - [^] 调整了部分输入组件的样式,解决了在为组件最外层元素设置宽度后内部组件没有匹配尺寸的问题。
- [^] 修正了
Table
组件在初始数据为空时(比如异步加载),滚动事件监听器没有正常初始化导致内容加载后,表头与内容横向滚动不同步的问题。
v2.0.0-alpha.9
🐞 问题修复
- [^] 修复了仍有部分局部输出全局样式对浮层不生效的问题。😭
- [^] 修正了入口文件导出没有与最新组件列表同步的问题。
- [^] 修正了
Schedule
组件 tooltip 提示可能失效的问题。
v2.0.0-alpha.8
🐞 问题修复
- [^] 修复了局部输出全局样式对浮层不生效的问题。
v2.0.0-alpha.7
⚠️ 非兼容性变更
- [-] 移除了
Button
组件的loading
插槽。
💡 主要变更
-
[+]
veui-theme-dls
新增了@veui-root-element
变量,支持局部输出全局样式的功能。使用指南
可以配置全局 Less 变量
@veui-root-element
为目标区域的元素名(这里必须是自定义元素),此时所有全局样式规则会自动调整到只针对该类元素内部生效,比如:@veui-root-element: v-app;
此时输出的全局样式都会带上
v-app
前缀,如:v-app button, v-app [type="button"], v-app [type="reset"], v-app [type="submit"] { -webkit-appearance: button; }
为什么要使用自定义元素?
如果允许自定义前缀使用 ID 或类选择器、或者其它复合选择器,将会使全局样式的特异性过高,超过 VEUI 组件样式的特异性(比如
#app button
>.veui-button
),导致组件样式被全局 normalize 之类的样式覆盖,产生不符合预期的结果。而由于组件至少有一级类选择器,所以在这里我们只要合理使用自定义元素,就可以有效避免样式覆盖的问题。
🐞 问题修复
- [^] 修复了
Table
组件初始时表头和内容列有时错位的问题。 - [^] 修正了
Menu
引入了错误的尖角图标的问题。
v2.0.0-alpha.6
⚠️ 非兼容性变更
- [^] 删除了
Drawer
组件的backdrop-closable
prop,新增outside-closable
prop 来控制点击组件外区域时是否关闭。 - [-] 移除了
Sorter
组件,仅在Table
内部使用。 - [^]
Table
组件带边框的样式修改为依赖新增 propbordered
,而非通过ui="bordered"
指定,并且当存在单元格合并(包括表格内容合并和嵌套表头时)必须输出带边框样式。
💡 主要变更
- [+] 新增
Menu
组件。 - [+] 指令式调用
Toast
组件时,支持传入自定义的渲染函数以输出非纯文本内容。 - [+]
Table
组件新增列分组(输出嵌套表头)功能支持。 - [+]
Table
组件新增固定列功能支持。 - [+]
Dialog
组件在modal
模式下,新增滚动锁定功能支持。
🐞 问题修复
- [^] 修复了
Toast
组件的进入动画。 - [^] 修复了
Input
组件在非 WebKit 浏览器下报错的问题。 - [^] 修复了
SearchBox
组件的role
属性输出。
v2.0.0-alpha.5
🐞 问题修复
- [^] 修复了
Drawer
组件没有正确支持overlay-class
prop 的问题。 - [^] 修正了
DatePicker
组件没有根据week-start
prop 处理快捷选项的问题。