🐛(layer):

更新文档

package/component/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@layui/icons-vue": "^1.0.9",
-    "@layui/layer-vue": "^1.3.16",
+    "@layui/layer-vue": "^1.3.18",
     "@vueuse/core": "^8.7.3",
     "async-validator": "^4.1.1",
     "cropperjs": "^1.5.12",

package/document/src/document/zh-CN/components/modal.md

@@ -272,7 +272,11 @@ export default {
   setup() {
     let id = null;
     const open = function() {
-      id = layer.open({title:"标题",content:"内容", shade: false})
+      id = layer.open({title:"标题",content:"内容", shade: false, btn: [
+        {text:"关闭", callback: function(ids) {
+          layer.close(ids);
+        }}
+      ]})
     }
     const close = function() {
       layer.close(id)

package/layer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layer-vue",
-  "version": "1.3.16",
+  "version": "1.3.18",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "http://www.layui-vue.com",
   "module": "lib/layer-vue.es.js",

package/layer/src/component/index.vue

@@ -40,7 +40,7 @@ import useResize from "../composable/useResize";
 import { zIndexKey } from "../tokens";
 
 export interface LayModalProps {
-  domId?: string;
+  id?: string;
   title?: string | boolean | Function;
   icon?: string | number;
   skin?: string;
@@ -76,7 +76,6 @@ export interface LayModalProps {
 }
 
 const props = withDefaults(defineProps<LayModalProps>(), {
-  domId: "",
   title: "标题",
   setTop: false,
   offset: () => ["50%", "50%"],
@@ -109,7 +108,7 @@ const emit = defineEmits(["close", "update:modelValue"]);
 const slots = useSlots();
 const max: Ref<boolean> = ref(false);
 const min: Ref<boolean> = ref(false);
-const id: Ref<string> = ref(nextId());
+const id: Ref<string> = ref(props.id || nextId());
 const layero = ref<HTMLElement | null>(null);
 const type: number = calculateType(props.type);
 const area: Ref<string[]> = ref(
@@ -590,7 +589,7 @@ defineExpose({ reset, open, close });
             <template v-for="(b, index) in btn" :key="index">
               <a
                 :class="[`layui-layer-btn${index}`]"
-                @click="b.callback(props.domId)"
+                @click="b.callback(id)"
                 >{{ b.text }}</a
               >
             </template>

package/layer/src/index.ts

@@ -38,6 +38,16 @@ const isExist = (id: any) => {
   return b;
 };
 
+const findById = (id: any) => {
+  let instance = null;
+  layerInstance.forEach((item: any, index: number) => {
+    if (item.modalContainer.id === id) {
+      instance = item;
+    }
+  });
+  return instance;
+};
+
 // 聚合 modal 配置
 const mergeOption = (option: any, defaultOption: any) => {
   if (option) defaultOption = Object.assign(defaultOption, option);
@@ -119,7 +129,7 @@ const layer = {
     const options = mergeOption(option, defaultOption);
     // 创建容器 Dom
     const modalContainer = createContainer();
-    options.id = modalContainer;
+    options.id = modalContainer.id;
     // 创建虚拟 Dom
     const modalInstance = h(
       LayLayer,
@@ -164,20 +174,21 @@ const layer = {
     // 维护实例
     addInstance({ modalContainer, modalInstance });
     // 返回实例
-    return { modalContainer, modalInstance };
+    return modalContainer.id;
   },
   // 关闭弹出层
-  close: (instance: any) => {
+  close: (id: any) => {
-    if (instance != null && isExist(instance.modalContainer.id)) {
+    if (id != null && isExist(id)) {
+      // 找到这个实例
+      const instance: any = findById(id);
       instance.modalInstance.component?.exposed?.close();
       setTimeout(() => {
         render(null, instance.modalContainer);
-        if (document.body.contains(instance.modalContainer))
+        if (document.body.contains(instance.modalContainer)) document.body.removeChild(instance.modalContainer);
-          document.body.removeChild(instance.modalContainer);
       }, 2000);
     }
     // 销毁实例
-    delInstance(instance.modalContainer.id);
+    delInstance(id);
   },
   // 关闭所有弹出层
   closeAll: () => {

pnpm-lock.yaml

@@ -72,7 +72,7 @@ importers:
   package/component:
     specifiers:
       '@layui/icons-vue': ^1.0.9
-      '@layui/layer-vue': ^1.3.16
+      '@layui/layer-vue': ^1.3.18
       '@vueuse/core': ^8.7.3
       async-validator: ^4.1.1
       cropperjs: ^1.5.12