💗 publish 0.2.5

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

@@ -75,9 +75,6 @@ export default {
 ::: title 图标列表
 :::
 
-::: demo
-
-<template>
 <ul class="site-doc-icon">
       <li>
         <i class="layui-icon layui-icon-heart-fill"></i>
@@ -1088,21 +1085,6 @@ export default {
         <div class="doc-icon-fontclass">layui-icon-add-circle-fine</div>
       </li>
     </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
 
 ::: title 图标属性
 :::

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

@@ -5,11 +5,11 @@
 
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-layer title="基础使用" v-model:visible="visible1">
+  <lay-modal title="基础使用" v-model:visible="visible1">
     <div style="padding:10px">
     这是一个基础弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -40,11 +40,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-layer title="允许拖动" v-model:visible="visible2" move="true">
+  <lay-modal title="允许拖动" v-model:visible="visible2" move="true">
     <div style="padding:10px">
       这是一个可以拖拽的弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -75,11 +75,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-layer title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
+  <lay-modal title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
       <div style="padding:10px">
         该弹窗支持放大缩小
       </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -110,11 +110,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-layer title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
+  <lay-modal title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
       <div style="padding:10px">
       指定弹窗显示的默认位置
       </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -145,7 +145,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
+  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
 </template>
 
 <script>
@@ -178,11 +178,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-layer title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
+  <lay-modal title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
     <div style="padding:10px">
     定义一组弹窗操作按钮
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -211,18 +211,18 @@ export default {
 
 :::
 
-::: title 开启遮盖
+::: title 关闭遮盖
 :::
 
 ::: demo
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-layer title="开启遮盖" move="true" shade="true" v-model:visible="visible7">
+  <lay-modal title="开启遮盖" move="true" shade="false" v-model:visible="visible7">
     <div style="padding:10px">
       允许点击遮盖层关闭弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -246,6 +246,49 @@ export default {
 
 :::
 
+::: title 函数调用
+:::
+
+::: 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>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { layer } from "../../../../src/index.ts"
+import { useRoute, useRouter } from "vue-router";
+export default {
+  setup() {
+
+    let id = null;
+
+    const open = function() {
+      id = layer.open({title:"标题",content:"内容", shade: false})
+    }
+
+    const close = function() {
+      layer.close(id)
+    }
+
+    const closeAll = function() {
+      layer.closeAll()
+    }
+
+    return {
+        open,
+        close,
+        closeAll
+    };
+  },
+};
+</script>
+
+:::
+
 ::: title 弹层属性
 :::
 

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

@@ -10,6 +10,16 @@
 ::: demo
 <template>
 <lay-timeline>
+<lay-timeline-item title="0.2.5">
+[新增] icons 组件化调用方式, 使用 class 作为组件名使用组件。<br>
+[新增] layer, 提供 layer.open, layer.close, layer.closeAll 函数式调用。<br>
+[修复] layer 的 id 属性不唯一, 调整 Guid 为 Uuid 策略。<br>
+[修改] lay-layer 组件为 lay-modal, 使用方式保持不变。<br>
+[修改] lay-layer 组件 move 默认为 true, 默认提供拖拽支持。<br> 
+[修稿] layer.css 为 @layui/layui-vue/lib/index.css。<br>
+[独立] layui-vue 项目, layer 与 lay-modal 组件仍内置, 亦支持单独引用。<br>
+[独立] icons-vue 项目, lay-icon 与 iconfont.less 仍内置, 亦支持单独引用。<br>
+</lay-timeline-item>
 <lay-timeline-item title="0.2.4">
 [增强] checkbox 组件, v-model 支持 array 数据类型。<br>
 [重构] row col 栅格组件, 支持 24 粒度布局。<br>

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

@@ -28,7 +28,7 @@ npm install @layui/layui-vue --save
 import App from './App.vue'
 import { createApp } from 'vue'
 import Layui from '@layui/layui-vue'
-import '@layui/layui-vue/lib/layui.css'
+import '@layui/layui-vue/lib/index.css'
 
 createApp(App).use(Layui).mount('#app')
 ```