theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(tree): 树形组件重构优化暂存

Browse Source
This commit is contained in:
落小梅 2021-10-18 19:10:36 +08:00
parent f22e123be0
commit 8bb751699f
8 changed files with 109 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/zh-CN/components/menu.md
View File

@ -78,7 +78,7 @@ export default {
::: :::
| | | | | | | |
| ----------- | -------- | --- | | --------------------- | ------ | --- |
| selectedKey (v-model) | 选中项 | -- | | selectedKey (v-model) | 选中项 | -- |
| openKeys (v-model) | 打开项 | -- | | openKeys (v-model) | 打开项 | -- |
@ -87,5 +87,5 @@ export default {
::: :::
| | | | | | | |
| ----------- | -------- | --- | | ----- | -------- | --- |
| title | 菜单标题 | -- | | title | 菜单标题 | -- |

124
docs/docs/zh-CN/guide/changelog.md
View File

@ -3,68 +3,68 @@
::: demo ::: demo
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="0.1.5"> <lay-timeline-item title="0.1.5">
[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br> [修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
[修复] tab 选项卡 v-model 激活项 双绑。<br> [修复] tab 选项卡 v-model 激活项 双绑。<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.1.4"> <lay-timeline-item title="0.1.4">
[新增] button 按钮 loading 属性, 提供 加载 状态。<br> [新增] button 按钮 loading 属性, 提供 加载 状态。<br>
[新增] tab 选项卡 allow-close 属性，支持 关闭。<br> [新增] tab 选项卡 allow-close 属性，支持 关闭。<br>
[新增] tab 选项卡 close change 事件，扩展 tab 动态逻辑。<br> [新增] tab 选项卡 close change 事件，扩展 tab 动态逻辑。<br>
[新增] ClickOutside 工具。<br> [新增] ClickOutside 工具。<br>
[新增] menu 菜单 selectedKey, openKeys 属性。<br> [新增] menu 菜单 selectedKey, openKeys 属性。<br>
[修复] menu 菜单 layui-this 样式，多 a 标签样式重叠。<br> [修复] menu 菜单 layui-this 样式，多 a 标签样式重叠。<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.1.1"> <lay-timeline-item title="0.1.1">
[新增] menu 菜单 title 插槽，允许自定义菜单项。<br> [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
[新增] table 表格 toolbar 插槽, 用于自定义工具栏。<br> [新增] table 表格 toolbar 插槽, 用于自定义工具栏。<br>
[新增] icon 图标 color 属性, 用于自定义颜色。<br> [新增] icon 图标 color 属性, 用于自定义颜色。<br>
[新增] icon 图标 size 属性, 用于自定义尺寸。<br> [新增] icon 图标 size 属性, 用于自定义尺寸。<br>
[新增] breadcrumb-item 面包屑 default 插槽, 用于自定义标题。<br> [新增] breadcrumb-item 面包屑 default 插槽, 用于自定义标题。<br>
[调整] menu 菜单 child-item 行高, 由 40 调整为 46。<br> [调整] menu 菜单 child-item 行高, 由 40 调整为 46。<br>
[调整] breadcrumb 面包屑样式, 让 Api 更合理。<br> [调整] breadcrumb 面包屑样式, 让 Api 更合理。<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.1.0"> <lay-timeline-item title="0.1.0">
[新增] tree 树，支持 node-click，selectKeys 等<br> [新增] tree 树，支持 node-click，selectKeys 等<br>
[新增] table 表格，提供 columns datasource page 分页<br> [新增] table 表格，提供 columns datasource page 分页<br>
[新增] transfer 穿梭框，提供 双列表数据切换<br> [新增] transfer 穿梭框，提供 双列表数据切换<br>
[新增] textarea 文本域 input 事件 与 disabled 禁用属性<br> [新增] textarea 文本域 input 事件 与 disabled 禁用属性<br>
[新增] button 按钮 disabled 禁用属性<br> [新增] button 按钮 disabled 禁用属性<br>
[新增] input 输入框 disabled 禁用属性<br> [新增] input 输入框 disabled 禁用属性<br>
[新增] checkbox 复选框 disabled 禁用属性<br> [新增] checkbox 复选框 disabled 禁用属性<br>
[新增] icon 图标 prefix 属性，支持自定义 iconfont 引入使用<br> [新增] icon 图标 prefix 属性，支持自定义 iconfont 引入使用<br>
[修改] card 卡片 slot 判断逻辑，body 不存在时，使用 default slot<br> [修改] card 卡片 slot 判断逻辑，body 不存在时，使用 default slot<br>
[修改] field 字段逻辑，当 slot 为空时，展现为线状，否则为面板<br> [修改] field 字段逻辑，当 slot 为空时，展现为线状，否则为面板<br>
[修复] collapse 手风琴，展开 收起 状态时的不同图标展示<br> [修复] collapse 手风琴，展开 收起 状态时的不同图标展示<br>
[重构] checkbox 复选框逻辑，让 api 更合理<br> [重构] checkbox 复选框逻辑，让 api 更合理<br>
[依赖] 升级 vue 3.2.20 依赖<br> [依赖] 升级 vue 3.2.20 依赖<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.0.17"> <lay-timeline-item title="0.0.17">
[新增] table 表格组件<br> [新增] table 表格组件<br>
[新增] tab 选项卡组件<br> [新增] tab 选项卡组件<br>
[新增] rate 评分组件<br> [新增] rate 评分组件<br>
[新增] button 组件 border 属性，设置边框颜色<br> [新增] button 组件 border 属性，设置边框颜色<br>
[新增] iconPicker 组件 showSearch 配置, 是否启用搜索<br> [新增] iconPicker 组件 showSearch 配置, 是否启用搜索<br>
[新增] page 分页组件<br> [新增] page 分页组件<br>
[修复] menu 组件，菜单项 与 目录 重复渲染<br> [修复] menu 组件，菜单项 与 目录 重复渲染<br>
[支持] 完善 layui-vue-sample 案例<br> [支持] 完善 layui-vue-sample 案例<br>
[支持] 文档支持模糊查询, 用于快速检索组件文档<br> [支持] 文档支持模糊查询, 用于快速检索组件文档<br>
[支持] 文档移动端预览<br> [支持] 文档移动端预览<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.0.14"> <lay-timeline-item title="0.0.14">
[新增] menu 菜单组件<br> [新增] menu 菜单组件<br>
[新增] iconPicker 图标选择组件<br> [新增] iconPicker 图标选择组件<br>
[新增] anim 动画文档<br> [新增] anim 动画文档<br>
[新增] dropdown 下拉菜单组件<br> [新增] dropdown 下拉菜单组件<br>
[新增] color 颜色文档<br> [新增] color 颜色文档<br>
[新增] collapse 手风琴组件<br> [新增] collapse 手风琴组件<br>
[新增] select 下拉选择组件<br> [新增] select 下拉选择组件<br>
[新增] empty 空数据组件<br> [新增] empty 空数据组件<br>
[新增] scroll 滚动容器组件<br> [新增] scroll 滚动容器组件<br>
[新增] avatar 头像组件<br> [新增] avatar 头像组件<br>
</lay-timeline-item> </lay-timeline-item>
</lay-timeline> </lay-timeline>
</template> </template>
<script> <script>

29
docs/src/layouts/Layout.vue
View File

@ -80,9 +80,10 @@ export default {
() => route.path, () => route.path,
(val) => { (val) => {
currentPath.value = val currentPath.value = val
},{ },
{
immediate: true, immediate: true,
deep: true deep: true,
} }
) )
@ -109,7 +110,7 @@ export default {
id: 39, id: 39,
title: '沙盒', title: '沙盒',
subTitle: 'sandbox', subTitle: 'sandbox',
path: '/zh-CN/guide/sandbox' path: '/zh-CN/guide/sandbox',
}, },
{ {
id: 4, id: 4,
@ -290,37 +291,43 @@ export default {
title: '复选框', title: '复选框',
subTitle: 'checkbox', subTitle: 'checkbox',
path: '/zh-CN/components/checkbox', path: '/zh-CN/components/checkbox',
},{ },
{
id: 33, id: 33,
title: '单选框', title: '单选框',
subTitle: 'radio', subTitle: 'radio',
path: '/zh-CN/components/radio', path: '/zh-CN/components/radio',
},{ },
{
id: 34, id: 34,
title: '输入框', title: '输入框',
subTitle: 'input', subTitle: 'input',
path: '/zh-CN/components/input', path: '/zh-CN/components/input',
},{ },
{
id: 35, id: 35,
title: '文本域', title: '文本域',
subTitle: 'textarea', subTitle: 'textarea',
path: '/zh-CN/components/textarea', path: '/zh-CN/components/textarea',
},{ },
{
id: 36, id: 36,
title: '开关', title: '开关',
subTitle: 'switch', subTitle: 'switch',
path: '/zh-CN/components/switch', path: '/zh-CN/components/switch',
},{ },
{
id: 37, id: 37,
title: '滑块', title: '滑块',
subTitle: 'slider', subTitle: 'slider',
path: '/zh-CN/components/slider', path: '/zh-CN/components/slider',
},{ },
{
id: 38, id: 38,
title: '轮播', title: '轮播',
subTitle: 'carousel', subTitle: 'carousel',
path: '/zh-CN/components/carousel' path: '/zh-CN/components/carousel',
} },
] ]
const selected = ref(1) const selected = ref(1)

23
docs/src/router/zh-CN.ts
View File

@ -179,35 +179,42 @@ const zhCN = [
path: '/zh-CN/components/transfer', path: '/zh-CN/components/transfer',
component: () => import('../../docs/zh-CN/components/transfer.md'), component: () => import('../../docs/zh-CN/components/transfer.md'),
meta: { title: '穿梭框' }, meta: { title: '穿梭框' },
},{ },
{
path: '/zh-CN/components/checkbox', path: '/zh-CN/components/checkbox',
component: () => import('../../docs/zh-CN/components/checkbox.md'), component: () => import('../../docs/zh-CN/components/checkbox.md'),
meta: { title: '复选框' }, meta: { title: '复选框' },
},{ },
{
path: '/zh-CN/components/radio', path: '/zh-CN/components/radio',
component: () => import('../../docs/zh-CN/components/radio.md'), component: () => import('../../docs/zh-CN/components/radio.md'),
meta: { title: '单选框' }, meta: { title: '单选框' },
},{ },
{
path: '/zh-CN/components/input', path: '/zh-CN/components/input',
component: () => import('../../docs/zh-CN/components/input.md'), component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' }, meta: { title: '输入框' },
},{ },
{
path: '/zh-CN/components/textarea', path: '/zh-CN/components/textarea',
component: () => import('../../docs/zh-CN/components/textarea.md'), component: () => import('../../docs/zh-CN/components/textarea.md'),
meta: { title: '文本域' }, meta: { title: '文本域' },
},{ },
{
path: '/zh-CN/components/switch', path: '/zh-CN/components/switch',
component: () => import('../../docs/zh-CN/components/switch.md'), component: () => import('../../docs/zh-CN/components/switch.md'),
meta: { title: '开关' }, meta: { title: '开关' },
},{ },
{
path: '/zh-CN/components/slider', path: '/zh-CN/components/slider',
component: () => import('../../docs/zh-CN/components/slider.md'), component: () => import('../../docs/zh-CN/components/slider.md'),
meta: { title: '滑块' }, meta: { title: '滑块' },
},{ },
{
path: '/zh-CN/components/carousel', path: '/zh-CN/components/carousel',
component: () => import('../../docs/zh-CN/components/carousel.md'), component: () => import('../../docs/zh-CN/components/carousel.md'),
meta: { title: '轮播' }, meta: { title: '轮播' },
} },
], ],
}, },
] ]

5
src/module/carouselItem/index.vue
View File

@ -6,10 +6,9 @@
<script setup name="LayCarouselItem" lang="ts"> <script setup name="LayCarouselItem" lang="ts">
import { defineProps, inject } from 'vue' import { defineProps, inject } from 'vue'
const props = const props = defineProps<{
defineProps<{
id: string id: string
}>() }>()
const active = inject('active') const active = inject('active')
</script> </script>

4
src/module/tab/index.vue
View File

@ -9,9 +9,9 @@
> >
{{ ss.props.title }} {{ ss.props.title }}
<i <i
@click.stop="close(ss.props.id)"
v-if="allowClose" v-if="allowClose"
class="layui-icon layui-icon-close layui-unselect layui-tab-close" class="layui-icon layui-icon-close layui-unselect layui-tab-close"
@click.stop="close(ss.props.id)"
></i> ></i>
</li> </li>
</ul> </ul>
@ -42,7 +42,7 @@ const active = computed({
}, },
set(val) { set(val) {
emit('update:modelValue', val) emit('update:modelValue', val)
} },
}) })
const change = function (id: any) { const change = function (id: any) {