1.1.1 • Published 3 years ago
@2alheure/vue-modal v1.1.1
Vue.js Modal
A simple Modal component for Vue.js.
This component is compatible with Vue 3.
Installation
First, run npm install @2alheure/vue-modal.
Then import it with import Modal from "@2alheure/vue-modal";.
Usage
Simple usage example
<Modal :displayed="isModalDisplayed" @close="isModalDisplayed = false">
<p>Look at that beautiful modal! =D</p>
</Modal>
<!-- OR -->
<Modal v-model="isModalDisplayed">
<p>Look at that beautiful modal! =D</p>
</Modal>
<script>
import Modal from "@2alheure/vue-modal";
export default {
components: {
Modal
},
data() {
return {
isModalDisplayed: true
};
}
}
</script>Props
| Name | Type | Default value | Description |
|---|---|---|---|
| modelValue | Boolean | false | Whether the modal should be displayed or not. This is the prop actually used by the v-model directive.This prop is required. |
| adaptative | Boolean | false | Whether to let the modal adapt its size to its content or not. If not, the modal will be half the width of the window. |
| btnClose | Boolean | true | Whether a "close" button should be displayed or not. |
| escClose | Boolean | true | Whether the modal should close when the "escape" key is pressed or not. |
| overlayClose | Boolean | true | Whether the modal should close when the user clicks outside its content or not. |
Events
| Name | Value type | Value | Description |
|---|---|---|---|
| update:modelValue | Boolean | false | Triggered each time the modal should be closed: The cross button or the outside of the modal has been cliked, escape key has been pressed. This is the event used for the v-model directive. |
| update:modelValue | Boolean | true | Triggered each time the modal is opened. |