JinghuiS/vue-modal-provider

Simple to use and manage modal. https://vue-modal-provider.netlify.app

vue-modal-provider

nice-modal-react vue implementation. Simple to use and manage modal.

Document

HereThe online document.

Installation

$ npm install vue-modal-provider

Examples

Embed 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>