Vue的可堆叠动画模态窗口组件– vue-modal

Vue的可堆叠动画模态窗口组件– vue-modal
插件名称 vue-modal
发布时间 2020年11月15日
插件作者 kouts

vue-modal是适用于Vue.js的Web应用程序的微型,响应式,动画化,可访问且可堆叠的模式窗口解决方案。

安装和下载:

# NPM
$ npm i @kouts/vue-modal --save

更多功能:

  • 使用以下数据变量打开和关闭 v-model
  • 包括合理的默认样式,但也可以通过用户CSS类和样式进行高度自定义
  • 通过广告位覆盖模式标题和内容
  • 使用CSS动画类的模态介绍和结尾效果
  • 暴露组件事件–开盘前,开盘,开盘后,收盘前,收盘后
  • 当内容超过屏幕高度时可滚动
  • 通过单击右上角的“ x”,覆盖图或esc 按键可关闭 
  • 能够在模式窗口打开时在元素上设置初始焦点,只需 在模式内部的元素上设置 autofocus属性
  • 焦点管理陷阱键盘焦点–模态窗口内的选项卡式导航
  • 具有无法关闭的模态窗口的能力
  • 按需渲染或始终以“实时”模式保持在DOM中
  • <body> 默认情况下附加的模态 ,能够附加到自定义元素

如何使用它:

1.将vue模态和必要的样式表导入项目。

import VueModal from '@kouts/vue-modal';
import '@kouts/vue-modal/dist/vue-modal.css';

2.注册模态分量。

// 全局
Vue.component('Modal', VueModal);
// 局部
new Vue({
    components: {
      'Modal': VueModal
    }
})

3.在应用程序中创建一个基本的模态组件。

<button type="button" @click="showModal=true">
  启用
</button>
<Modal v-model="showModal" title="Modal Title">
  <p>这是一个modal</p>
</Modal>
new Vue({
    data: {
      showModal: false
    }
});

4.默认组件道具来自定义模态窗口。

title: {
  type: String,
  default: ''
},
baseZindex: {
  type: Number,
  default: 1051
},
bgClass: {
  type: String,
  default: ''
},
wrapperClass: {
  type: String,
  default: ''
},
modalClass: {
  type: String,
  default: ''
},
modalStyle: {
  type: Object,
  default: () => ({})
},
inClass: {
  type: String,
  default: 'vm-fadeIn'
},
outClass: {
  type: String,
  default: 'vm-fadeOut'
},
bgInClass: {
  type: String,
  default: 'vm-fadeIn'
},
bgOutClass: {
  type: String,
  default: 'vm-fadeOut'
},
appendTo: {
  type: String,
  default: 'body'
},
live: {
  type: Boolean,
  default: false
},
enableClose: {
  type: Boolean,
  default: true
},
basedOn: {
  type: Boolean,
  default: false
}