vben：对话框组件

本文将介绍如何在vben admin vue 框架中，创建对话框组件，并成功应用的代码。代码即插即用。

结果如下图所示，

一、创建对话框组件

创建 myModal/index.vue

<template><div><BasicModal@register="registerModal"v-bind="$attrs"title="示例对话框"@ok="handleSubmit"width="58%"><p>这是示例内容</p></BasicModal></div>
</template>
<script lang="ts" setup>import { BasicModal, useModalInner } from '/@/components/Modal';const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {setModalProps({ confirmLoading: false });console.log(data);});const handleSubmit = () => {closeModal();};
</script>

二、应用对话框组件

<template><div class="more"  @click="showModal"><span class="more-span">点击显示对话框</span><i class="arrow"></i></div><myModal width="50%" @register="modalOpen" @success="handleSuccess" ></myModal>
</template><script lang="ts" setup>import { ref } from 'vue';import myModal from './myModal/index.vue';import { useModal } from '/@/components/Modal';const [modalOpen, { openModal }] = useModal();// true时显示。const showModal = (record: any) => {openModal(true, { isUpdate: true, record });};
</script>