vue中彈窗外掛程式的應用方法（代碼）

本篇文章給大家帶來的內容是關於vue中彈窗外掛程式的應用方法（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

vue做移動端經常碰到彈窗的需求, 這裡寫一個功能簡單的vue彈窗

popup.vue

<template>  <div class="popup-wrapper" v-show="visible" @click="hide">    <div class="popup-text">{{text}}</div>  </div></template>

組件html結構, 外層pposition:fixed定位, 內層p顯示彈窗內容

export default {  name: 'popup',  props: {    text: { //文字內容      type: String,      default: ''    },    time: { //顯示的時間長度      type: Number,      default: 3e3    },  },  data(){    return {      visible: false    }  },  methods: {    open() {      this.visible = true      clearTimeout(this.timeout);      this.$emit('show')      if(this.time > 0){        this.timeout = setTimeout(() => {          this.hide()        }, this.time)      }    },    hide() {      this.visible = false      this.$emit('hide')      clearTimeout(this.timeout);    }  }}

popup.vue只有2個屬性: 文本和顯示時間。組件顯示隱藏由內部屬性visible控制，只暴露給外界open和hide2個方法，2個方法觸發對應的事件

測試一下

<template>  <popup ref="popup" text="彈窗內容" :time="1e3"></popup></template><script>import Popup from '@/components/popup'  ...    this.$refs.popup.open()   ...</script>

外掛程式化

組件功能寫好了，但是這種調用方式顯得很累贅。舉個例子layer.js的調用就是layer.open(...)沒有import，沒有ref，當然要先全域引用layer。我們寫的彈窗能不能這麼方便呢，為此需要把popup改寫成vue外掛程式。
說是外掛程式，但能配置屬性調用方法的還是組件本身，具體是執行個體化的組件，而且這個執行個體必須是全域單例，這樣不同vue檔案喚起popup的時候才不會打架

產生單例

// plugins/popupVm.jsimport Popup from '@/components/popup'let $vmexport const factory = (Vue)=> {  if (!$vm) {    let Popup = Vue.extend(PopupComponent)    $vm = new Popup({      el: document.createElement('p')    })    document.body.appendChild($vm.$el)  }  return $vm}

組件執行個體化後是添加在body上的，props不能寫在html裡需要js去控制，這裡寫個方法讓屬性預設值繼續發揮作用

// plugins/util.jsexport const setProps = ($vm, options) => {  const defaults = {}  Object.keys($vm.$options.props).forEach(k => {    defaults[k] = $vm.$options.props[k].default  })  const _options = _.assign({}, defaults, options)  for (let i in _options) {    $vm.$props[i] = _options[i]  }}

// plugins/popupPlugin.jsimport { factory } from './popupVm'import { setProps } from './util'export default {  install(Vue) {     let $vm = factory(Vue);     const popup = {      open(options) {        setProps($vm, options)        //監聽事件        typeof options.onShow === 'function' && $vm.$once('show', options.onShow);        typeof options.onHide === 'function' && $vm.$once('hide', options.onHide);        $vm.open();      },      hide() {        $vm.hide()      }，      //只配置文字      text(text) {        this.open({ text })      }    }        Vue.prototype.$popup = popup  }}

在main.js內註冊外掛程式

//main.jsimport Vue from 'vue'import PopupPlugin from '@/plugins/popupPlugin'Vue.use(PopupPlugin)

在vue架構內調用就非常方便了

<script>  ...    this.$popup.text('彈窗訊息')  ...</script>