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']
        })  
}