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

🌺 增补 load 加载层文档

Browse Source
This commit is contained in:
就眠儀式 2021-12-06 22:58:46 +08:00
parent 0592b3cd72
commit 940b455f14
6 changed files with 107 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
example/docs/zh-CN/components/load.md Normal file
View File

@ -0,0 +1,77 @@
::: title 基础使用
:::
::: demo
<template>
<lay-button-container>
<lay-button @click="loading0" type="primary">加载一</lay-button>
<lay-button @click="loading1" type="primary">加载二</lay-button>
<lay-button @click="loading2" type="primary">加载三</lay-button>
</lay-button-container>
</template>
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
export default {
setup() {
const loading0 = function() {
layer.load(0, {time: 3000})
}
const loading1 = function() {
layer.load(1, {time: 3000})
}
const loading2 = function() {
layer.load(2, {time: 3000})
}
return {
loading0,
loading1,
loading2
}
}
}
</script>
:::
::: title 手动关闭
:::
::: demo
<template>
<lay-button-container>
<lay-button @click="loading" type="primary">加载</lay-button>
</lay-button-container>
</template>
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
export default {
setup() {
const loading = function() {
let id = layer.load(0)
setTimeout(() => {
layer.close(id)
},3000)
}
return {
loading
}
}
}
</script>
:::

21
example/docs/zh-CN/components/modal.md
View File

@ -72,9 +72,7 @@ export default {
<template>
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
<lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
<div style="padding:10px">
该弹窗支持放大缩小
</div>
该弹窗支持放大缩小
</lay-modal>
</template>
@ -107,9 +105,7 @@ export default {
<template>
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
<lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
<div style="padding:10px">
指定弹窗显示的默认位置
</div>
</lay-modal>
</template>
@ -175,9 +171,7 @@ export default {
<template>
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
<lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
<div style="padding:10px">
定义一组弹窗操作按钮
</div>
</lay-modal>
</template>
@ -215,9 +209,7 @@ export default {
<template>
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
<lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
<div style="padding:10px">
允许点击遮盖层关闭弹窗
</div>
</lay-modal>
</template>
@ -248,9 +240,9 @@ export default {
::: demo
<template>
<lay-button @click="open" type="primary">open</lay-button>
<lay-button @click="close" type="primary">close</lay-button>
<lay-button @click="closeAll" type="primary">closeAll</lay-button>
<lay-button @click="open" type="primary">打开</lay-button>
<lay-button @click="close" type="primary">关闭</lay-button>
<lay-button @click="closeAll" type="primary">关闭所有</lay-button>
</template>
<script>
@ -296,9 +288,8 @@ export default {
| move | 允许拖拽 | `false` |
| maxmin | 最小化 最大化 | `false` |
| offset | 位置 | -- |
| width | 宽 | -- |
| height | 高 | -- |
| v-model:visible | 展示 隐藏 | false |
| area | 尺寸 | -- |
| v-model | 展示 隐藏 | false |
| content | 内容 | -- |
| shade | 开启遮盖 | -- |
| shadeClose | 遮盖点击关闭 | -- |

4
example/src/router/zh-CN.ts
View File

@ -262,6 +262,10 @@ const zhCN = [
path: '/zh-CN/components/modal',
component: () => import('../../docs/zh-CN/components/modal.md'),
meta: { title: '弹层' },
},{
path: '/zh-CN/components/load',
component: () => import('../../docs/zh-CN/components/load.md'),
meta: { title: '加载' },
},
],
},

7
example/src/view/component.vue
View File

@ -334,9 +334,14 @@ export default {
children: [
{
id: 90,
title: '弹层',
title: '模态窗',
subTitle: 'modal',
path: '/zh-CN/components/modal',
}, {
id: 90,
title: '加载层',
subTitle: 'modal',
path: '/zh-CN/components/load',
},
],
},

24
example/src/view/hooks.vue
View File

@ -81,27 +81,27 @@ export default {
path: '/zh-CN/hooks/useClickOutside',
},
{
id: 3,
id: 2,
title: '拖拽',
subTitle: 'useMove',
path: '/zh-CN/hooks/useMove',
},
{
id: 2,
title: '全屏',
subTitle: 'useFullScreen',
path: '/zh-CN/hooks/useFullScreen',
},{
id: 3,
title: '状态',
subTitle: 'useState',
path: '/zh-CN/hooks/useState',
},{
id: 4,
title: '布尔',
subTitle: 'useBoolean',
path: '/zh-CN/hooks/useBoolean',
},{
id: 4,
title: '状态',
subTitle: 'useState',
path: '/zh-CN/hooks/useState',
},
{
id: 5,
title: '全屏',
subTitle: 'useFullScreen',
path: '/zh-CN/hooks/useFullScreen',
}
],
},
]

4
package.json
View File

@ -30,14 +30,14 @@
"peerDependencies": {
"vue": "^3.2.23",
"vue-router": "^4.0.12",
"@layui/layer-vue": "^1.0.6",
"@layui/layer-vue": "^1.0.7",
"@layui/icons-vue": "^1.0.0",
"@layui/hooks-vue": "^0.1.6"
},
"dependencies": {
"vue": "^3.2.23",
"vue-router": "^4.0.12",
"@layui/layer-vue": "^1.0.6",
"@layui/layer-vue": "^1.0.7",
"@layui/icons-vue": "^1.0.0",
"@layui/hooks-vue": "^0.1.6"
},