npm install usemodal-vue3

usemodal-vue3

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

DEMO

Install

npm i usemodal-vue3

Usage

javascript

import { ref } from 'vue';

import { Modal } from 'usemodal-vue3';



let isVisible = ref(false);





    your content...





Use in Nuxt

javascript



    

        your content...





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.

javascript

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



    This modal will be displayed according to the status when the previous one is closed or the display status is fasle



// m2 order is 1, will go first



    This modal will be displayed first





If you need to use drag.

javascript

// draggable = true. By default, hold down the title part and drag



    ...





// You can customize the dragged part. Especially when 'type' is 'clean'

const handle = ref();





    You can hold here and drag

Documentation

$3

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

$3

github

usemodal-vue3

npm install usemodal-vue3

usemodal-vue3

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

DEMO

Install

npm i usemodal-vue3

Usage

javascript

import { ref } from 'vue';

import { Modal } from 'usemodal-vue3';



let isVisible = ref(false);





    your content...





Use in Nuxt

javascript



    

        your content...





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.

javascript

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



    This modal will be displayed according to the status when the previous one is closed or the display status is fasle



// m2 order is 1, will go first



    This modal will be displayed first





If you need to use drag.

javascript

// draggable = true. By default, hold down the title part and drag



    ...





// You can customize the dragged part. Especially when 'type' is 'clean'

const handle = ref();





    You can hold here and drag

Documentation

$3

github

usemodal-vue3