更新内容:
0.3.7
- [新增] slider 滑块组件 setp 属性, 支持设置步长。
- [新增] index.less 样式文件, 支持一定程度的主题定制。
- [移除] `defineProps`,`defineEmits` 两个全局宏命令引入,消除控制台警告。
- [修复] menu 组件 inverted 属性不兼容 string 类型。
- [修复] menu 组件 level 属性不兼容 string 类型。
- [升级] icons-vue 1.0.4 版本。
- [升级] layer-vue 1.3.3 版本。
0.3.6
- [新增] result 结果组件, 提供 success error 通用状态页。
- [新增] exception 异常组件, 提供 403, 404, 500 通用异常页。
- [新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。
- [新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。
- [新增] menu 组件 theme 属性, 可选值 light 和 dark。
- [修复] table 组件 header 不随 body 滚动。
- [升级] vue 3.2.29 版本。
0.3.5
- [新增] split-panel 分割面板, 高度灵活的布局组件。
- [新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。
- [修复] tab-item 组件 closable 属性警告, 兼容 string 类型。
- [修复] dropdown 下拉菜单 content 显示位置问题。
- [升级] icons-vue 1.0.3 版本。
- [升级] layer-vue 1.3.1 版本。
更新详情:
主题定制
新版本发布后,支持一定程度的主题定制,以满足业务和品牌上多样化的视觉需求,包括但不限于主色、圆角、边框和部分组件的视觉定制。以下是一些最常用的通用变量,所有样式变量可以在 这里 找到。
@global-primary-color: #009688; // 主题色
@global-checked-color: #5FB878; // 选中色
@global-border-radius: 2px; // 圆角度数
除全局的主题配置外, 我们还对组件提供定制化的主题配置
@button-primary-color: #009688; // 按钮主题色
@button-border-radius: 2px; // 按钮圆角度数
...
如何定制 ,建立一个单独的 less 变量文件,引入这个文件覆盖 index.less 里的变量。
@import '@layui/layui-vue/lib/index.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
异常组件
在实际开发场景中,开发者需要去定义常用错误页面,为避免大量重复的编码工作,我们为开发者预定义了一组通用的错误页面,使用 lay-exception 标签进行创建
结果组件
除异常页面外,我们还可以通过 result 组件,来构建 成功 与 失败 的反馈提醒
分割面板
更灵活的布局方案