🌺 增补 load 加载层文档
This commit is contained in:
77
example/docs/zh-CN/components/load.md
Normal file
77
example/docs/zh-CN/components/load.md
Normal 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>
|
||||
|
||||
:::
|
||||
@@ -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 | 遮盖点击关闭 | -- |
|
||||
|
||||
Reference in New Issue
Block a user