vuejs使用vue-js-modal弹窗

vuejs使用vue-js-modal弹窗

演示地址：http://vue-js-modal.yev.io/

1.安装

npm i -D vue-js-modal

 

弹窗组件地址自定义关闭按钮在main.js中添加属性

Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } })

其中dynamicDefaults: { clickToClose: true }定义关闭按钮

最后只需要在自己组件中的关闭按钮添加事件

 <button v-else class="narrow" @click="open()"></button>

@click="open()"为事件

data中配置

open(){
   this.$modal.show('组件名称', {
          text: 'This text is passed as a property',
          isDialog: true
        }, {
          width: widthPercent,
          height: heightPercent,
          draggable: false,
          transition: 'scala',
          adaptive: true,
          resizable: true,
          classes: ['v--modal-overlay']
        })  
}