更新 drawer 抽屉文档

example/docs/zh-CN/components/drawer.md

@@ -0,0 +1,175 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible = ref(false)
+
+    const changeVisible = function() {
+        visible.value = !visible.value;
+    }
+
+    return {
+        visible,
+        changeVisible
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 抽屉嵌套
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible1" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible1" title="标题">
+      <lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
+      <lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
+      内容
+      </lay-layer>
+  </lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(false)
+
+    const changeVisible1 = function() {
+        visible1.value = !visible1.value;
+    }
+
+    const visible2 = ref(false)
+
+    const changeVisible2 = function() {
+        visible2.value = !visible2.value;
+    }
+
+    return {
+        visible1,
+        visible2,
+        changeVisible1,
+        changeVisible2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 函数调用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="openDrawer" type="primary">调用</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "../../../../src/index.ts"
+
+export default {
+  setup() {
+
+    const openDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容"
+        })
+    }
+
+    return {
+        openDrawer
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 不同方向
+:::
+
+::: demo
+
+<template>
+    <lay-button @click="openTopDrawer" type="primary">上</lay-button>
+    <lay-button @click="openBottomDrawer" type="primary">下</lay-button>
+    <lay-button @click="openLeftDrawer" type="primary">左</lay-button>
+    <lay-button @click="openRightDrawer" type="primary">右</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "../../../../src/index.ts"
+
+export default {
+  setup() {
+
+    const openTopDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "t"
+        })
+    }
+
+    const openBottomDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "b"
+        })
+    }
+
+    const openLeftDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "l"
+        })
+    }
+
+    const openRightDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "r"
+        })
+    }
+
+    return {
+        openTopDrawer,
+        openBottomDrawer,
+        openLeftDrawer,
+        openRightDrawer,
+    }
+  }
+}
+</script>
+
+:::

example/docs/zh-CN/guide/changelog.md

@@ -16,6 +16,8 @@
       <li> 
         <h3>0.3.5 <span class="layui-badge-rim">2022-01-19</span></h3> 
         <ul> 
+          <li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
+          <li>[新增] layer 弹层 type 属性 drawer 值, 支持抽屉模式。</li>
           <li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
           <li>[升级] icons-vue 1.0.3 版本。</li>
         </ul> 

example/src/router/zh-CN.ts

@@ -321,6 +321,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/msg.md"),
             meta: { title: "信息" },
           },
+          {
+            path: "/zh-CN/components/drawer",
+            component: () => import("../../docs/zh-CN/components/drawer.md"),
+            meta: { title: "抽屉" },
+          },
           {
             path: "/zh-CN/components/backtop",
             component: () => import("../../docs/zh-CN/components/backtop.md"),

example/src/view/utils/menus.ts

@@ -333,6 +333,12 @@ const menus = [
         subTitle: "msg",
         path: "/zh-CN/components/msg",
       },
+      {
+        id: 94,
+        title: "抽屉",
+        subTitle: "drawer",
+        path: "/zh-CN/components/drawer",
+      },
     ],
   },
 ];

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.3",
-    "@layui/layer-vue": "^1.2.5",
+    "@layui/layer-vue": "^1.3.0",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",