Application method of pop-up plug-in in vue (code)

The content of this article is about the application method (code) of the pop-up plug-in in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

vue often encounters the need for pop-up windows when making mobile terminals. Here is a vue pop-up window with simple functions

popup.vue

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

component html structure, The outer pposition:fixed is positioned, and the inner p displays the pop-up content

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 has only two attributes: text and display time. The display and hiding of the component is controlled by the internal attribute visible. It is only exposed to the outside world through two methods: open and hide. The two methods trigger the corresponding events.

Test it

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

Plug-in

The component function has been written, but this calling method seems very cumbersome. For example, the call of layer.js is layer.open(...) without import or ref. Of course, the layer must be referenced globally first. Can the pop-up window we write be so convenient? For this reason, we need to rewrite the pop-up into a vue plug-in.
It is said to be a plug-in, but it is the component itself that can configure the attribute calling method, specifically the instantiated component, and this instance must be a global singleton, so that there will be no fights when different vue files evoke popups

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

The component is added to the body after instantiation. props cannot be written in HTML and needs to be controlled by js. Here is a method to allow the default value of the attribute to continue to work. Function

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

Register the plug-in in main.js

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

Vue.use(PopupPlugin)

It is very convenient to call it within the vue framework

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

Related recommendations:

How to use sweetalert2 pop-up plug-in in vue project

How to use vue’s toast pop-up component

The above is the detailed content of Application method of pop-up plug-in in vue (code). For more information, please follow other related articles on the PHP Chinese website!