@2alheure/vue-modal 中文文档教程

Question

Vue.js Modal

一个简单的 Vue.js 模态组件。
此组件与 Vue 3 兼容。

• Vue.js Modal
• Installation
• Usage
  • Simple usage example
  • Props
  • Events

Installation

首先，运行 npm install @2alheure/vue-modal。
然后使用 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.