diff --git a/package/component/package.json b/package/component/package.json index cb6ec09f..83d9d702 100644 --- a/package/component/package.json +++ b/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", diff --git a/package/document/src/document/zh-CN/components/modal.md b/package/document/src/document/zh-CN/components/modal.md index cca3d638..aeba44aa 100644 --- a/package/document/src/document/zh-CN/components/modal.md +++ b/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) diff --git a/package/layer/package.json b/package/layer/package.json index a5d02985..78ce0c00 100644 --- a/package/layer/package.json +++ b/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", diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue index 9f88af23..3bdb512c 100644 --- a/package/layer/src/component/index.vue +++ b/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(), { - domId: "", title: "标题", setTop: false, offset: () => ["50%", "50%"], @@ -109,7 +108,7 @@ const emit = defineEmits(["close", "update:modelValue"]); const slots = useSlots(); const max: Ref = ref(false); const min: Ref = ref(false); -const id: Ref = ref(nextId()); +const id: Ref = ref(props.id || nextId()); const layero = ref(null); const type: number = calculateType(props.type); const area: Ref = ref( @@ -590,7 +589,7 @@ defineExpose({ reset, open, close }); diff --git a/package/layer/src/index.ts b/package/layer/src/index.ts index 10ea3004..9e678dfe 100644 --- a/package/layer/src/index.ts +++ b/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) => { - if (instance != null && isExist(instance.modalContainer.id)) { + close: (id: any) => { + 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)) - document.body.removeChild(instance.modalContainer); + if (document.body.contains(instance.modalContainer)) document.body.removeChild(instance.modalContainer); }, 2000); } // 销毁实例 - delInstance(instance.modalContainer.id); + delInstance(id); }, // 关闭所有弹出层 closeAll: () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c0111a6a..02e346d2 100644 --- a/pnpm-lock.yaml +++ b/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