layui/example/docs/zh-CN/components/load.md

128 lines
2.0 KiB
Markdown
Raw Normal View History

2021-12-06 22:58:46 +08:00
::: 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,
2021-12-09 13:43:58 +08:00
loading2,
2021-12-06 22:58:46 +08:00
}
}
}
</script>
:::
2021-12-08 17:40:28 +08:00
::: title 其他方式
:::
::: demo
<template>
<lay-button type="primary" @click="openLoading">加载消息</lay-button>
</template>
<script>
import { layer } from "../../../../src/index.ts"
export default {
setup() {
const openLoading = function() {
layer.msg("加载中...", { icon : 16, time: 1000})
}
return {
openLoading
}
}
}
</script>
:::
2021-12-06 22:58:46 +08:00
::: title 手动关闭
:::
2021-12-07 16:06:36 +08:00
::: demo 使用 layer.msg 创建弹出层, time 属性用于配置显示时长
2021-12-06 22:58:46 +08:00
<template>
<lay-button-container>
2021-12-08 17:40:28 +08:00
<lay-button @click="loading" type="primary">关闭消息</lay-button>
2021-12-06 22:58:46 +08:00
</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>
:::
2021-12-09 14:11:29 +08:00
::: title 组件方法
:::
```
layer.load(load, options)
```
::: title 组件属性
:::
::: table
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ---- |
| load | 组件类型 | `1` `2` `3` |
| options | 选配属性 | { time: 加载时长 } |
2021-12-16 17:57:59 +08:00
:::
::: comment
2021-12-09 14:11:29 +08:00
:::