Méthode d'application du plug-in pop-up dans vue (code)

Le contenu de cet article concerne la méthode d'application (code) du plug-in contextuel dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Vue rencontre souvent le besoin de fenêtres pop-up lors de la création de terminaux mobiles. Voici une fenêtre pop-up vue avec des fonctions simples

popup.vue

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

.

composant html Structure, le p externeposition:fixed est positionné et le p interne affiche le contenu du pop-up

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 n'a que 2 attributs : le texte et l'heure d'affichage. L'affichage et le masquage du composant sont contrôlés par l'attribut interne visible. Il n'est exposé au monde extérieur que par deux méthodes : ouvrir et masquer. Les deux méthodes déclenchent les événements correspondants

Testez-le

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

Plug-in

La fonction du composant a été écrite, mais cette méthode d'appel semble très lourde. Par exemple, l'appel de layer.js est layer.open(...) sans import ni ref. Bien entendu, la couche doit d'abord être référencée globalement. La fenêtre contextuelle que nous écrivons peut-elle être si pratique ? Pour cette raison, nous devons réécrire la fenêtre contextuelle dans un plug-in vue.

On dit que c'est un plug-in, mais c'est le composant lui-même qui peut configurer la méthode d'appel d'attribut, en particulier le composant instancié, et cette instance doit être un singleton global, afin qu'il n'y ait pas de combat lorsqu'il est différent les fichiers vue évoquent des popups

Générer un singleton

// 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
}

Le composant est ajouté au corps après l'instanciation

Il ne peut pas être écrit en HTML et doit être contrôlé par js. une méthode pour permettre à la valeur par défaut de l'attribut de continuer à fonctionnerprops

// 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
  }
}

Enregistrez le plug-in dans main.js

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

Vue.use(PopupPlugin)

Il est très pratique d'appeler dans le framework vue

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

Recommandations associées :

Comment utiliser le plug-in pop-up sweetalert2 dans le projet vue

Comment utiliser le composant pop-up toast de vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!