layui-vue 0.3.7 发布,新增大量基础组件,支持主题定制

来源: 投稿
作者: 就眠仪式
2022-02-07 14:47:00

更新内容:

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 组件,来构建 成功 与 失败 的反馈提醒

 

分割面板

更灵活的布局方案

展开阅读全文
点击加入讨论🔥(3) 发布并加入讨论🔥
3 评论
9 收藏
分享
返回顶部
顶部