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

::: anchor :::

::: title 基本介绍 :::

::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 :::

::: title 基础使用 :::

::: demo

加载一 加载二 加载三 <script> import { ref } from 'vue' import { layer } from "@layui/layer-vue" 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

加载消息 <script> import { layer } from "@layui/layer-vue" export default { setup() { const openLoading = function() { layer.msg("加载中...", { icon : 16, time: 1000}) } return { openLoading } } } </script>

:::

::: title 手动关闭 :::

::: demo 使用 layer.msg 创建弹出层, time 属性用于配置显示时长

关闭消息 <script> import { ref } from 'vue' import { layer } from "@layui/layer-vue" export default { setup() { const loading = function() { let id = layer.load(0) setTimeout(() => { layer.close(id) },3000) } return { loading } } } </script>

:::

::: title 组件方法 :::

layer.load(load, options)

::: title 组件属性 :::

::: table

属性	描述	备注
load	组件类型	1 2 3
options	选配属性	{ time: 加载时长 }

:::

::: comment :::

::: previousNext load :::