init

.svn/pristine/fa/fac9090040a8bfb67d91ce6020f04affe4c3c772.svn-base

@@ -0,0 +1,140 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 layer.load(type, options) 方法创建一个加载层, `type` 属性用于设置弹出层类型。
+
+<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 "@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 使用 `layer.msg` 方法, 设置 `icon` 为 16, 弹出一个带有加载动画的提示信息。
+
+<template>
+    <lay-button type="primary" @click="openLoading">加载消息</lay-button>
+</template>
+
+<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.close()` 方法来关闭一个正在加载的实例。
+
+<template>
+  <lay-button-container>
+    <lay-button @click="loading" type="primary">关闭消息</lay-button>
+  </lay-button-container>
+</template>
+
+<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: 加载时长 }   |
+
+:::
+
+::: contributor load
+:::  
+
+::: previousNext load
+:::