2021-06-13

全局弹窗

参考文章Vue服务式全局调用弹出框插件
弹窗使用vant样式

1 main.js

import Vant from 'vant'
Vue.use(Vant)

2 创建弹窗文件 popup

// popup.vue
<template>
  <div class="popup_box">
    <van-overlay
      :show="show"
      @click="closePopup"
      v-if="show"
    >
      <div class="wrapper">
        <div
          class="block"
          @click.stop="boxClick"
        >{{contentTxt}}</div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  name: 'popup',
  data () {
    return {
      show: false,
      contentTxt: '----'
    }
  },
  methods: {
    getProductCheckResult (options) {
      // let arr = []
      // for (key in options) {
      //   if (options.hasOwnProperty(key)) {
      //     app.push(key)
      //   }
      // }
      let arr = Object.keys(options)
      console.log(arr);
      arr.forEach(item => {
        this[item] = options[item]
      });
    },
    closePopup () {
      console.log('closePopup');
      this.show = false
    },
    boxClick () {
      console.log('boxClick');
    }
  }
}
</script>
<style lang="sass" scoped>
.wrapper
  display: flex
  align-items: center
  justify-content: center
  height: 100%

.block
  width: 120px
  height: 120px
  background-color: #fff
</style>

// popup.js
/**
 * 调用 this.$Dialog.getProductCheckResult({
 * 		show: true,
      	contentTxt: '测试001'
      })
 * 
 */

import popup from './Popup.vue'

export default {
  install(Vue) {
    const PopupInstance = Vue.extend(popup)
    let popupInit;
    const initInstance = () => {
      // 实例化vue实例
      popupInit = new PopupInstance();
      let popupEl = popupInit.$mount().$el;
      document.body.appendChild(popupEl);
    };
    Vue.prototype.$Dialog = {
      getProductCheckResult(options) {
        if (!popupInit) {
          initInstance();
        }
        console.log(options)
        popupInit.getProductCheckResult(options)
      }
    }
  }
}

3 main.js

//main.js 导入
import globalAlert from '../xxx/popup'
Vue.use(globalAlert)

4 使用

//. xxx.vue
<template></template>
export default {

	......
	methods: {
    test () {
      this.$Dialog.getProductCheckResult({
 		show: true,
      	contentTxt: '测试001'
      })
    }
  }
}
</script>