全局封装弹框函数调用

弹框组件 popup.vue文件

<template>
	 <Modal v-model="show" @on-cancel="cancel">
		<div> 内容</div>
	 </Modal>
 </template>
 <script>
export default {
  data () {
    return {
      show: false,
      cancel: () => {}
    }
  },
  methods: {
    open () {
      this.show = true
    }
  }
}
 

popup.js文件

import Vue from 'vue'
import popupfrom './popup.vue'

const Popup= Vue.extend(popup)

popup.install = function (val, data) {
  let instance = new Popup({
    data
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.open(val)
  })
}

export default popup

main.js中引入

import popup from '@/components/popup'
Vue.prototype.$popupOpen = popup.install

vue文件中使用

this.$popupOpen({
	cancel: () => {
	// 关闭弹框回调
	}
})

如果需要向传参popup.js文件更改为

import Vue from 'vue'
import popupfrom './popup.vue'

const Popup= Vue.extend(popup)

popup.install = function (val, data) {
  let instance = new Popup({
    data
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.open(val)
  })
}

export default popup

vue文件中使用

this.$popupOpen(true, {
	cancel: () => {
	// 关闭弹框回调
	}
})

popup.vue文件 vuex需要引入使用

import store from '@/store'
// 使用vuex数据
store.state.user.userInfo
// 调用mutations修改数据
store.commit('SET', 1)