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

perf(layer): 初步集成 layer 弹层, 新增 useMove 拖拽 hooks

Browse Source
This commit is contained in:
就眠仪式
2021-11-01 01:02:21 +08:00
parent 5aa3544914
commit 32a2500d67
53 changed files with 925 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/zh-CN/components/animation.md
View File

@@ -74,7 +74,7 @@ export default {
::: title 动画类名
:::
| Name | Description | Accepted Values |
| 类名 | 描述 | 使用 |
| --------------------------------- | ------------ | ---------------------------------------------- |
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |

2
docs/docs/zh-CN/components/avatar.md
View File

@@ -83,7 +83,7 @@ export default {
::: title 头像属性
:::
| | | |
| 属性 | 描述 | 可选值 |
| ------ | ---- | -------------- |
| src | 图源 | -- |
| size | 尺寸 | `xs` `sm` `lg` |

12
docs/docs/zh-CN/components/breadcrumb.md
View File

@@ -82,13 +82,13 @@ export default {
::: title 面包屑属性
:::
| Name | Description | Accepted Values |
| --------- | ----------- | --------------- |
| separator | 分割符 | `/` |
| 属性 | 描述 | 默认值 |
| --------- | ------ | ------ |
| separator | 分割符 | `/` |
::: title 面包屑插槽
:::
| Name | Description | Accepted Values |
| ------- | ----------- | --------------- |
| default | 默认插槽 | `--` |
| 插槽 | 描述 | 默认值 |
| ------- | -------- | ------ |
| default | 默认插槽 | `--` |

49
docs/docs/zh-CN/components/button.md
View File

@@ -252,13 +252,48 @@ export default {
:::
::: title 事件处理
:::
::: demo 使用 @click 设置单击回调
<template>
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const clickHandle = function() {
console.log('点击事件')
}
return {
clickHandle
}
}
}
</script>
:::
::: title 按钮属性
:::
| Name | Description | Accepted Values |
| ------ | ----------- | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` |
| 属性 | 描述 | 可选值 |
| ------ | ------ | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` |
::: title 按钮事件
:::
| 事件 | 描述 | 参数 |
| ----- | -------- | ---- |
| click | 单击事件 | `--` |

14
docs/docs/zh-CN/components/cards.md
View File

@@ -108,14 +108,14 @@ export default {
::: title 卡片属性
:::
| | | |
| ----- | ---- | --- |
| title | 标题 | -- |
| 属性 | 描述 | 可选值 |
| ----- | ---- | ------ |
| title | 标题 | -- |
::: title 卡片插槽
:::
| | | |
| ------ | -------- | --- |
| header | 头部插槽 | -- |
| body | 内容插槽 | -- |
| 插槽 | 描述 | 可选值 |
| ------ | -------- | ------ |
| header | 头部插槽 | -- |
| body | 内容插槽 | -- |

8
docs/docs/zh-CN/components/carousel.md
View File

@@ -119,7 +119,7 @@ export default {
::: title 轮播属性
:::
| Name | Description | Accepted Values |
| 属性 | 描述 | 可选值 |
| --------- | ------------ | ------------------------- |
| v-model | 当前激活项 | `--` |
| anim | 切换方向 | `default` `updown` |
@@ -129,6 +129,6 @@ export default {
::: title 轮播事件
:::
| Name | Description | Accepted Values |
| ------ | ----------- | --------------- |
| change | 切换回调 | id |
| 事件 | 描述 | 可选值 |
| ------ | -------- | ------ |
| change | 切换回调 | id |

11
docs/docs/zh-CN/components/checkbox.md
View File

@@ -149,13 +149,20 @@ export default {
:::
::: title checkbox 属性
::: title 复选框属性
:::
| Name | Description | Accepted Values |
| 属性 | 描述 | 可选值 |
| ------------------- | ------------- | -------------------- |
| name | 原始属性 name | -- |
| skin | 主题 | -- |
| label | 选中值 | -- |
| checked ( v-model ) | 是否选中 | `true` `false` |
| change | 切换事件 | isChecked : 当前状态 |
::: title 复选框事件
:::
| 事件 | 描述 | 可选值 |
| ------ | -------- | -------------------- |
| change | 切换事件 | isChecked : 当前状态 |

13
docs/docs/zh-CN/components/color.md
View File

@@ -143,3 +143,16 @@ export default {
</script>
:::
::: title 颜色说明
:::
| Class | 描述 | 使用 |
| --------------- | ---- | ----------------------- |
| layui-bg-red | 赤色 | class="layui-bg-red" |
| layui-bg-orange | 橙色 | class="layui-bg-orange" |
| layui-bg-green | 墨绿 | class="layui-bg-green" |
| layui-bg-cyan | 藏青 | class="layui-bg-cyan" |
| layui-bg-blue | 蓝色 | class="layui-bg-blue" |
| layui-bg-black | 雅黑 | class="layui-bg-black" |

6
docs/docs/zh-CN/components/container.md
View File

@@ -68,6 +68,6 @@ export default {
::: title 容器属性
:::
| Name | Description | Accepted Values |
| ----- | ----------- | --------------- |
| fluid | 流模式 | `true` `false` |
| 属性 | 描述 | 可选值 |
| ----- | ------ | -------------- |
| fluid | 流模式 | `true` `false` |

16
docs/docs/zh-CN/components/dropdown.md
View File

@@ -67,16 +67,16 @@ export default {
:::
::: title Dropdown 属性
::: title 下拉属性
:::
| Name | Description | Accepted Values |
| ------- | ----------- | --------------- |
| trigger | 触发方式 | `click` `hover` |
| 属性 | 描述 | 可选值 |
| ------- | -------- | --------------- |
| trigger | 触发方式 | `click` `hover` |
::: title Dropdown 插槽
::: title 下拉插槽
:::
| Name | Description | Accepted Values |
| ------- | ----------- | --------------- |
| content | 下拉内容 | -- |
| 插槽 | 描述 | 可选值 |
| ------- | -------- | ------ |
| content | 下拉内容 | -- |

7
docs/docs/zh-CN/components/empty.md
View File

@@ -45,9 +45,8 @@ export default {
:::
::: title empty 属性
:::
| Name | Description | Accepted Values |
| ----------- | ----------- | --------------- |
| description | 描述信息 | -- |
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| description | 描述信息 | -- |

28
docs/docs/zh-CN/components/grid.md
View File

@@ -137,24 +137,22 @@ export default {
:::
::: title 行属性
:::
| Name | Description | Accepted Values |
| ----- | ----------- | --------------- |
| space | 间隔 | -- |
| 属性 | 描述 | 可选值 |
| ----- | ---- | ------ |
| space | 间隔 | 0 - 30 |
::: title 列属性
:::
| Name | Description | Description Info | Accepted Values |
| -------- | ----------- | ----------------------- | --------------- |
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
| sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 |
| md | 尺寸 | 中等屏幕 (桌面 ≥992px) | 12 |
| lg | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12 |
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
| smOffset | 偏移 | 小屏幕 (平板 ≥768px) | 12 |
| mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px) | 12 |
| lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12 |
| 属性 | 描述 | 可选值 |
| --------- | ------------------------------ | ------ |
| xs | 尺寸 - 超小屏幕 (手机<768px) | 0 - 12 |
| sm | 尺寸 - 小屏幕 (平板 ≥768px) | 0 - 12 |
| md | 尺寸 - 中等屏幕 (桌面 ≥992px) | 0 - 12 |
| lg | 尺寸 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
| xs-offset | 偏移 - 超小屏幕 (手机<768px) | 0 - 12 |
| sm-offset | 偏移 - 小屏幕 (平板 ≥768px) | 0 - 12 |
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | 0 - 12 |
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |

12
docs/docs/zh-CN/components/icon.md
View File

@@ -1107,9 +1107,9 @@ export default {
::: title 图标属性
:::
| Name | Description | Default Value |
| ------ | ----------- | ----------------- |
| type | 图标 | `layui-icon-home` |
| prefix | 前缀 | `layui-icon` |
| color | 颜色 | -- |
| size | 尺寸 | -- |
| 属性 | 描述 | 默认值 |
| ------ | ---- | ----------------- |
| type | 图标 | `layui-icon-home` |
| prefix | 前缀 | `layui-icon` |
| color | 颜色 | -- |
| size | 尺寸 | -- |

26
docs/docs/zh-CN/components/input.md
View File

@@ -103,15 +103,21 @@ export default {
:::
::: title input 属性
::: title 输入框属性
:::
| Name | Description | Accepted Values |
| ----------- | --------------- | ---------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
| input | 原生 input 事件 | event : 事件对象 |
| foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- |
| 属性 | 描述 | 可选值 |
| ----------- | ------------- | -------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
::: title 输入框属性
:::
| 事件 | 描述 | 参数 |
| ----- | --------------- | ---------------- |
| input | 原生 input 事件 | event : 事件对象 |
| foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- |

226
docs/docs/zh-CN/components/layer.md Normal file
View File

@@ -0,0 +1,226 @@
::: title 基本使用
:::
::: demo
<template>
<lay-button @click="changeVisible1" type="primary">简单使用</lay-button>
<lay-layer title="身如不系之舟" v-model:visible="visible1">
<div style="padding: 20px;">
忘了是怎么开始, 也许就是对你
</div>
</lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible1 = ref(false)
const changeVisible1 = function() {
visible1.value = !visible1.value
}
return {
visible1
};
},
};
</script>
:::
::: title 允许拖动
:::
::: demo
<template>
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
<lay-layer title="身如不系之舟" v-model:visible="visible2" move="true">
<div style="padding: 20px;">
忘了是怎么开始, 也许就是对你
</div>
</lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible2 = ref(false)
const changeVisible2 = function() {
visible2.value = !visible2.value
}
return {
visible2
};
},
};
</script>
:::
::: title 放大缩小
:::
::: demo
<template>
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
<lay-layer title="平胸女子" v-model:visible="visible3" move="true" maxmin="true">
<div style="padding: 20px;">
她是照相只照半边的女子
</div>
</lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible3 = ref(false)
const changeVisible3 = function() {
visible3.value = !visible3.value
}
return {
visible3
};
},
};
</script>
:::
::: title 指定位置
:::
::: demo
<template>
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
<lay-layer title="亦是此间少年" v-model:visible="visible4" move="true" :offset="['100px','100px']">
<div style="padding: 20px;">
暗恋是一个人的事
</div>
</lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible4 = ref(false)
const changeVisible4 = function() {
visible4.value = !visible4.value
}
return {
visible4
};
},
};
</script>
:::
::: title 远程窗体
:::
::: demo
<template>
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
<lay-layer title="亦是此间少年" width="500px" height="400px" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const type5 = ref(2)
const visible5 = ref(false)
const changeVisible5 = function() {
visible5.value = !visible5.value
}
return {
type5,
visible5
};
},
};
</script>
:::
::: title 定义操作
:::
::: demo
<template>
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
<lay-layer title="亦是此间少年" v-model:visible="visible6" move="true" :btn="btn6">
<div style="padding: 20px;">
你喜欢我吗？
</div>
</lay-layer>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible6 = ref(false)
const btn6 = [
{text:'确认', callback: ()=>{ alert("确认事件") }},
{text:'取消', callback: ()=>{ alert("取消事件") }}
]
const changeVisible6 = function() {
visible6.value = !visible6.value
}
return {
btn6,
visible6
};
},
};
</script>
:::
::: title 弹层属性
:::
| 备注 | 描述 | 默认值 |
| --------------- | ------------- | ------- |
| title | 标题 | -- |
| move | 允许拖拽 | `false` |
| maxmin | 最小化 最大化 | `false` |
| offset | 位置 | -- |
| width | 宽 | -- |
| height | 高 | -- |
| v-model:visible | 展示 隐藏 | false |
| content | 内容 | -- |

2
docs/docs/zh-CN/components/layout.md
View File

@@ -172,7 +172,7 @@ export default {
::: title 布局组件
:::
| | | |
| 组件 | 描述 | |
| ---------- | ---- | --- |
| lay-layout | 容器 | -- |
| lay-header | 顶部 | -- |

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

@@ -80,14 +80,14 @@ export default {
::: title 菜单属性
:::
| Name | Description | Accepted Values |
| --------------------- | ----------- | --------------- |
| selectedKey (v-model) | 选中项 | -- |
| openKeys (v-model) | 打开项 | -- |
| 属性 | 描述 | 备注 |
| --------------------- | ------ | ---- |
| selectedKey (v-model) | 选中项 | -- |
| openKeys (v-model) | 打开项 | -- |
::: title 菜单插槽
:::
| Name | Description | Accepted Values |
| ----- | ----------- | --------------- |
| title | 菜单标题 | -- |
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |

6
docs/docs/zh-CN/components/page.md
View File

@@ -196,7 +196,7 @@ export default {
::: title 分页属性
:::
| | | |
| 属性 | 描述 | 默认值 |
| ----------- | ------------ | ------- |
| limit | 每页数量 | -- |
| total | 总条数 | -- |
@@ -209,14 +209,14 @@ export default {
::: title 分页事件
:::
| | | |
| 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } |
::: title 分页插槽
:::
| | | |
| 插槽 | 描述 | 默认值 |
| ---- | ------ | ------ |
| prev | 上一页 | 上一页 |
| next | 下一页 | 下一页 |

6
docs/docs/zh-CN/components/panel.md
View File

@@ -24,6 +24,6 @@ export default {
::: title 面板插槽
:::
| Name | Description | Accepted Values |
| ------- | ----------- | --------------- |
| default | 默认插槽 | -- |
| 插槽 | 描述 | 可选值 |
| ------- | -------- | ------ |
| default | 默认插槽 | -- |

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

@@ -110,10 +110,10 @@ export default {
:::
::: title Progress 属性
::: title 进度属性
:::
| | | |
| 属性 | 描述 | 可选值 |
| -------- | -------- | --------------------------------------------- |
| percent | 进度 | -- |
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

20
docs/docs/zh-CN/components/radio.md
View File

@@ -94,12 +94,18 @@ export default {
:::
::: title radio 属性
::: title 单选框属性
:::
| Name | Description | Accepted Values |
| ------- | ------------- | ---------------- |
| name | 原始属性 name | -- |
| label | 当前值 | -- |
| v-model | 选中值 | -- |
| change | 切换事件 | current : 当前值 |
| 属性 | 描述 | 默认值 |
| ------- | ------------- | ------ |
| name | 原始属性 name | -- |
| label | 当前值 | -- |
| v-model | 选中值 | -- |
::: title 单选框事件
:::
| 事件 | 描述 | 参数 |
| ------ | -------- | ---------------- |
| change | 切换事件 | current : 当前值 |

10
docs/docs/zh-CN/components/rate.md
View File

@@ -134,8 +134,8 @@ export default {
::: title 评分属性
:::
| | | |
| -------- | -------- | --- |
| v-model | 评分值 | -- |
| length | 评分长度 | -- |
| readonly | 只读模式 | -- |
| 属性 | 描述 | 默认值 |
| -------- | -------- | ------ |
| v-model | 评分值 | -- |
| length | 评分长度 | -- |
| readonly | 只读模式 | -- |

24
docs/docs/zh-CN/components/switch.md
View File

@@ -108,14 +108,20 @@ export default {
:::
::: title switch 属性
::: title 开关属性
:::
| Name | Description | Accepted Values |
| ------------- | -------------- | ---------------- |
| name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` |
| change | 切换事件 | current : 当前值 |
| active-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` |
| 属性 | 描述 | 可选值 |
| ------------- | -------------- | -------------- |
| name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` |
| active-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` |
::: title 开关事件
:::
| 属性 | 描述 | 可选值 |
| ------ | -------- | ---------------- |
| change | 切换事件 | current : 当前值 |

23
docs/docs/zh-CN/components/tab.md
View File

@@ -166,21 +166,20 @@ export default {
:::
::: title tab 属性
::: title 选项卡属性
:::
| Name | Description | Accepted Values |
| ----------- | ----------- | --------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
::: title tab 事件
| 属性 | 描述 | 可选值 |
| ----------- | -------- | -------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
::: title 选项卡事件
:::
| Name | Description | Accepted Params |
| ------ | ----------- | --------------- |
| change | 选中切换 | -- |
| close | 关闭事件 | -- |
| 事件 | 描述 | 参数 |
| ------ | -------- | ---- |
| change | 选中切换 | -- |
| close | 关闭事件 | -- |

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

@@ -260,11 +260,11 @@ export default {
:::
::: title table attributes
::: title 表格属性
:::
| | | |
| 属性 | 描述 | 可选值 |
| ------------------------ | ---------- | -------------- |
| columns | 列配置 | -- |
| dataSource | 数据源 | -- |

24
docs/docs/zh-CN/components/textarea.md
View File

@@ -82,13 +82,21 @@ export default {
:::
::: title textarea 属性
::: title 文本域属性
:::
| Name | Description | Accepted Values |
| ----------- | --------------- | --------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
| input | 原生 input 事件 | val : 当前值 |
| 属性 | 描述 | 可选值 |
| ----------- | ------------- | -------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
::: title 文本域事件
:::
| 事件 | 描述 | 可选值 |
| ----- | --------------- | ---------------- |
| input | 原生 input 事件 | event : 事件对象 |
| foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- |

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

@@ -10,6 +10,11 @@
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="0.2.2">
[新增] useFullScreen 全屏 hooks。<br>
[新增] useMove 拖拽 hooks。<br>
[新增] textarea 文本域 blur foucs 获取焦点 失去焦点 事件。<br>
</lay-timeline-item>
<lay-timeline-item title="0.2.1">
[新增] hooks 文档
[新增] useClickOutside 外部 click 事件 hooks。<br>

2
docs/docs/zh-CN/guide/getStarted.md
View File

@@ -7,8 +7,6 @@
:::
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2849/8547475_layui-vue_1633242524.png" style="margin-left:24px;border-radius: 10px;" width="140px" />
<span style="font-size: 30px;color: #aaa;margin: 0 20px;">+</span>
<img src="https://qn.antdv.com/vue.png" width="160px" />
<br>
<br>

48
docs/docs/zh-CN/guide/sandbox.md
View File

@@ -1,30 +1,11 @@
::: title 测试
::: title 沙盒环境
:::
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree">
<lay-menu-item title="工作空间" id="0">
<lay-menu-child-item id="1" title="控制台">
</lay-menu-child-item>
<lay-menu-child-item id="2" title="分析页">
</lay-menu-child-item>
</lay-menu-item>
<lay-menu-item title="错误页面" id="3">
<lay-menu-child-item id="4" title="403">
</lay-menu-child-item>
<lay-menu-child-item id="5" title="404">
</lay-menu-child-item>
<lay-menu-child-item id="6" title="500">
</lay-menu-child-item>
</lay-menu-item>
</lay-menu>
<lay-tab type="brief" v-model="selectedKey">
<lay-tab-item v-for="tab in tabs" :key="tab" :title="tab.title" :id="tab.id">
{{ tab }}
</lay-tab-item>
</lay-tab>
<lay-layer title="一任流行坎止"></lay-layer>
<lay-layer title="身如不系之舟" :offset="['260px','220px']"></lay-layer>
</template>
<script>
@@ -32,31 +13,8 @@ import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
const route = useRoute();
const tabs = ref([{
id:'1',title:'选项一'
},{
id:'2',title:'选项二'
}])
const isTree = ref(true);
const selectedKey = ref("1");
const openKeys = ref(["0"]);
const change = function (id) {
selectedKey.value = id
}
return {
isTree,
selectedKey,
openKeys,
change,
tabs
};
},
};

19
docs/docs/zh-CN/hooks/useClickOutside.md
View File

@@ -1,10 +1,12 @@
::: title 基础使用
:::
::: demo 使用 useClickOutside 监听元素外的监听事件
::: block 使 用 useClickOutside 监 听 元 素 外 click 事 件
:::
```vue
<template>
<lay-button ref='buttonRef' type='primary'>当前元素</lay-button>
<lay-button type="primary" ref="buttonRef">当前元素</lay-button>
</template>
<script>
@@ -13,19 +15,24 @@ import useClickOutside from '/@src/hooks/useClickOutside'
export default {
setup() {
const buttonRef = (ref < null) | (HTMLElement > null)
const isClickOutside = useClickOutside(buttonRef)
watch(isClickOutside, () => {
console.log("元素外 click 事件")
console.log('元素外 click 事件')
})
return {
buttonRef
buttonRef,
}
}
},
}
</script>
```
::: title 使用备注
:::
| 备注 | 描述 | 类型 |
| -------------- | --------------- | ---- |
| isClickOutside | 使用 watch 监听 | Ref |

38
docs/docs/zh-CN/hooks/useFullScreen.md Normal file
View File

@@ -0,0 +1,38 @@
::: title 基础使用
:::
::: block 使 用 useMove 为 元 素 提 供 拖 拽 支 持
:::
```vue
<template>
<lay-button @click="fullScreen">全屏切换</lay-button>
</template>
<script>
import useFullScreen from '/@src/hooks/useFullScreen'
export default {
setup() {
const { fullScreen, isFullScreen } = useFullScreen()
watch(isFullScreen, () => {
console.log('全屏切换')
})
return {
fullScreen,
isFullScreen,
}
},
}
</script>
```
::: title 使用备注
:::
| 事件 | 描述 | 类型 |
| ------------ | -------- | -------- |
| fullScreen | 全屏切换 | Function |
| isFullScreen | 当前状态 | Ref |

33
docs/docs/zh-CN/hooks/useMove.md Normal file
View File

@@ -0,0 +1,33 @@
::: title 基础使用
:::
::: block 使 用 useFullScreen 快 速 完 成 fullScreen 操 作
:::
```vue
<template>
<button id="button">拖动</button>
</template>
<script>
import { ref, watch, onMounted } from 'vue'
import useMove from '/@src/hooks/useMove'
export default {
setup() {
onMounted(() => {
const el = document.getElementById('button')
useMove(el)
})
return {}
},
}
</script>
```
::: title 使用备注
:::
| 备注 | 描述 | 类型 |
| ---- | -------------- | ----------- |
| el | 需要拖拽的元素 | HtmlElement |

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

@@ -43,7 +43,7 @@
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:void(0)"> 0.2.1 </a>
<a href="javascript:void(0)"> 0.2.2 </a>
</li>
</ul>
</lay-header>

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

@@ -52,6 +52,11 @@ const zhCN = [
component: () => import('../../docs/zh-CN/guide/norms.md'),
meta: { title: '规范' },
},
{
path: '/zh-CN/guide/sandbox',
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
meta: { title: '沙盒' },
},
],
},
{
@@ -253,6 +258,11 @@ const zhCN = [
import('../../docs/zh-CN/components/colorPicker.md'),
meta: { title: '颜色选择器' },
},
{
path: '/zh-CN/components/layer',
component: () => import('../../docs/zh-CN/components/layer.md'),
meta: { title: '弹层' },
},
],
},
{
@@ -267,6 +277,16 @@ const zhCN = [
import('../../docs/zh-CN/hooks/useClickOutside.md'),
meta: { title: 'useClickOutside' },
},
{
path: '/zh-CN/hooks/useFullScreen',
component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
meta: { title: 'useFullScreen' },
},
{
path: '/zh-CN/hooks/useMove',
component: () => import('../../docs/zh-CN/hooks/useMove.md'),
meta: { title: 'useMove' },
},
],
},
],

10
docs/src/styles/markdown.css
View File

@@ -118,19 +118,27 @@ table {
width: 100%; /*表格宽度*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
border-right: 1px solid whitesmoke;
border-left: 1px solid whitesmoke;
border-radius: 4px;
}
table th,
table td {
font-size: 14px;
color: #606266;
width: 160px;
max-width: 160px;
height: 50px; /*统一每一行的默认高度*/
border-top: 1px solid whitesmoke; /*内部边框样式*/
padding: 0 10px; /*内边距*/
padding-left: 28px;
}
table th {
color: #666;
font-weight: 500;
white-space: nowrap; /*表头内容强制在一行显示*/
background-color: #fafafa;
}
table td {
white-space: nowrap;

12
docs/src/view/component.vue
View File

@@ -328,6 +328,18 @@ export default {
},
],
},
{
id: 1,
title: '反馈',
children: [
{
id: 90,
title: '弹层',
subTitle: 'layer',
path: '/zh-CN/components/layer',
},
],
},
]
const selected = ref(1)

6
docs/src/view/guide.vue
View File

@@ -86,6 +86,12 @@ export default {
subTitle: 'change log',
path: '/zh-CN/guide/changelog',
},
{
id: 4,
title: '沙盒',
subTitle: 'sandbox',
path: '/zh-CN/guide/sandbox',
},
],
},
]

16
docs/src/view/hooks.vue
View File

@@ -70,10 +70,22 @@ export default {
children: [
{
id: 1,
title: 'useClickOutside',
subTitle: '',
title: '事件',
subTitle: 'useClickOutside',
path: '/zh-CN/hooks/useClickOutside',
},
{
id: 3,
title: '拖拽',
subTitle: 'useMove',
path: '/zh-CN/hooks/useMove',
},
{
id: 2,
title: '全屏',
subTitle: 'useFullScreen',
path: '/zh-CN/hooks/useFullScreen',
},
],
},
]

2
docs/src/view/index.vue
View File

@@ -28,7 +28,7 @@
>
</div>
<div class="site-version">
<span>当前版本：v<cite class="site-showv">0.2.1</cite></span>
<span>当前版本：v<cite class="site-showv">0.2.2</cite></span>
<span
><router-link
class="layui-inline site-down"