usemodal-vue3

An easy-to-use Modal for Vue 3. Multiple modals can pop up orderly.

DEMO

Install

npm i usemodal-vue3

Usage

import { ref } from 'vue';
import { Modal } from 'usemodal-vue3';

let isVisible = ref(false);

<Modal v-model:visible="isVisible">
    <div>your content...</div>
</Modal>

Use in Nuxt

<client-only>
    <Modal v-model:visible="isVisible">
        <div>your content...</div>
    </Modal>
</client-only>

Your page may need to pop up multiple modals, and different modals may depend on different data sources, sometimes even asynchronously, you can easily manage their popup order.

import { reactive } from 'vue';
import { useModal, Modal } from 'usemodal-vue3';

const setModal = useModal({
    m1: 2, // The larger the number, the later in the order
    m2: 1 // Smaller numbers, first in order
});

let modalVisible = reactive({});

modalVisible = setModal('m1', true);

setTimeout(() => {
    // or  modalVisible = setModal('m2', false)
    modalVisible = setModal('m2', true); // either true or false, you have to define a state.
}, 2000)

function myCancel() {
    // do something....
     modalVisible = setModal('m2', false); // m2 is closed, while the other states are true in order
}

// m1 order is 2
<Modal name="m1" v-model:visible="modalVisible">
    <div>This modal will be displayed according to the status when the previous one is closed or the display status is fasle</div>
</Modal>
// m2 order is 1, will go first
<Modal name="m2" v-model:visible="modalVisible">
    <div>This modal will be displayed first</div>
</Modal>

If you need to use drag.

// draggable = true. By default, hold down the title part and drag
<Modal v-model:visible="true" :draggable="true">
    <div>...</div>
</Modal>

// You can customize the dragged part. Especially when 'type' is 'clean'
const handle = ref();

<Modal v-model:visible="true" :draggable="handle">
    <div ref="handle">You can hold here and drag</div>
</Modal>

Documentation

Props

| params | Description | Type | Default | | :---- | :---- | :---- | :---- | | visible(v-model) | Is the modal visible ? | boolean | | | name | Required if there are multiple modals and there is an order problem | string | | | mask | Whether the mask is visible | boolean | true | | maskClosable | Whether clicking on the mask can close the modal | boolean | true | | type | Type of the modal . 'clean' is custom | string | '' | | modalClass | When you need to customize the style, you can modify the outermost class | string | '' | | width | Width of the modal. When the value is a number, the unit is px | string|number | 500 | | offsetTop | Position from top. When the value is a number, the unit is px | string|number | 100 | | zIndex | z-index | number | 1000 | | title | Title of the modal | string | 'Title' | | animation | Whether the animation pops up | boolean | true | | closable | Whether the close icon is visible or not | boolean | true | | draggable | Is it draggable? The default target is Header(Title), but you can also pass in an element(commonly used in type for 'clean') | boolean|object | false | | cancelButton | Cancel button configuration: text: the text of the button.onclick: Click callback function.loading: Whether to display the loading animation after the button is clicked.| object | {text: 'cancel', onclick: () => {}, loading: false} | | okButton | Ok button configuration: text: the text of the button.onclick: Click callback function.loading: Whether to display the loading animation after the button is clicked. | object | {text: 'ok', onclick: () => {}, loading: false} |

Event

| event | Description | callback params | | :---- | :---- | :---- | | onVisible | When the modal is displayed | | | onUnVisible | When the modal is hidden | |

github

usemodal-vue3