nice-modal-react vue implementation. Simple to use and manage modal.
HereThe online document.
$ npm install vue-modal-providerEmbed your application with ModalProvider
<!--App.vue --> <script setup lang="ts"> import { RouterView } from "vue-router"; import { ModalProvider } from "vue-modal-provider"; </script> <template> <ModalProvider> <RouterView /> </ModalProvider> </template>Create modal component
<!-- Modal.vue --> <template> <el-dialog v-model="visible"> {{ args }} <el-button @click="hide(), resolve(1111), remove()">close</el-button> </el-dialog> </template> <script lang="ts" setup> import { useModalRef } from "vue-modal-provider"; const { // show variables visible, // close modal hide, args, // remove modal lose animation remove, resolve, reject, } = useModalRef(); </script>Use in the view
<script lang="ts" setup> import { useModal } from "vue-modal-provider"; import TestModal from "./Modal.vue"; const { show } = useModal(TestModal); function showModal() { show("test msg").then((c) => { console.log(c); }); } </script> <template> <el-button @click="showModal">open modal</el-button> </template>