vue/antdv/jeecgboot自定义全局组件

popup.vue

<!-- 自定义全局弹窗 -->
<template>
<div id="">
<j-modal :title="title" width="800px" :visible="show" :fullscreen="false" :forceRender="true"  switchFullscreen
:footer="null" @ok="" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="show=false"
cancelText="关闭">
</j-modal>
</div>
</template>
<script>
export default {
  name: 'hlPopup',
  data () {
    return {
      show: false,
  disableSubmit:false,
      title: '',
    }
  },
  created () {
  },
  methods: {
    btnClick () {
      this.click()
      this.show = false
    }
  }
}
</script>
<style>
</style>

popup.js

// <!-- 自定义全局弹窗 -->
import Vue from 'vue'
import HlPopup from './popup.vue'
 
const PopupBox = Vue.extend(HlPopup)
 
HlPopup.install = function (data) {
  let instance = new PopupBox({
    data
  }).$mount()
 
  document.body.appendChild(instance.$el)
 
  Vue.nextTick(() => {
    instance.show = true
    // show 和弹窗组件里的show对应，用于控制显隐
  })
}
 
export default HlPopup

main.js

// 引入自定义全局弹窗
import HlPopup from './views/yzhr/popup/popup.js'
Vue.prototype.$hlpopup = HlPopup.install

使用

 that.$hlpopup({
  title:"测试"
  })