Anwendungsmethode des Popup-Plug-Ins in Vue (Code)

Der Inhalt dieses Artikels befasst sich mit der Anwendungsmethode (Code) des Popup-Plug-Ins. Ich hoffe, dass er für Sie hilfreich ist.

Vue stößt bei der Herstellung mobiler Endgeräte häufig auf den Bedarf an Popup-Fenstern. Hier ist ein Vue-Popup-Fenster mit einfachen Funktionen

popup.vue

<template>
  <div>
    <div>{{text}}</div>
  </div>
</template>

Komponenten-HTML-Struktur, Das äußere pposition:fixed ist positioniert und das innere p zeigt den Popup-Inhalt an

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 hat nur zwei Attribute: Text und Anzeigezeit. Das Ein- und Ausblenden der Komponente wird durch das interne Attribut „sichtbar“ gesteuert. Sie wird der Außenwelt nur über zwei Methoden angezeigt: „Öffnen“ und „Ausblenden“. Die beiden Methoden lösen entsprechende Ereignisse aus:

Testen Sie es

<template>
  <popup></popup>
</template>
<script>
import Popup from &#39;@/components/popup&#39;
  ...
    this.$refs.popup.open()
   ...
</script>

Plug-in

Die Komponentenfunktion wurde geschrieben, aber diese Aufrufmethode scheint sehr umständlich zu sein. Der Aufruf von „layer.js“ lautet beispielsweise „layer.open(...)“ ohne Import oder Ref. Natürlich muss der Layer zuerst global referenziert werden. Kann das von uns geschriebene Popup-Fenster so praktisch sein? Aus diesem Grund müssen wir das Popup in ein Vue-Plug-In umschreiben.
Man spricht von einem Plug-in, aber es ist die Komponente selbst, die die Attributaufrufmethode konfigurieren kann, insbesondere die instanziierte Komponente, und diese Instanz muss ein globaler Singleton sein, damit es bei Unterschieden nicht zu Konflikten kommt Vue-Dateien rufen Popups hervor

Singleton generieren

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

Die Komponente wird nach der Instanziierung zum Text hinzugefügt props kann nicht in HTML geschrieben werden und muss von js gesteuert werden Lassen Sie zu, dass der Standardwert des Attributs weiterhin funktioniert

// plugins/util.js
export 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.js
import { 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
  }
}

Registrieren Sie das Plug-in in main.js

//main.js
import Vue from 'vue'
import PopupPlugin from '@/plugins/popupPlugin'

Vue.use(PopupPlugin)

Es ist sehr praktisch, es im Vue-Framework aufzurufen

<script>
  ...
    this.$popup.text(&#39;弹窗消息&#39;)
  ...
</script>

Verwandte Empfehlungen:

im Vue-Projekt So verwenden Sie das Sweetalert2-Popup-Plug-In

So verwenden Sie die Toast-Popup-Komponente von Vue

Das obige ist der detaillierte Inhalt vonAnwendungsmethode des Popup-Plug-Ins in Vue (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!