Application method of Vue pop-up window plug-in (code)

This article brings you the content is about Vue shot window plug-in application Method (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Vue often touches the need for pop-up windows, and here's a simple Vue pop-up window.

Popup.vue

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

Component HTML structure, outer p position:fixed positioning, inner layer p display pop-up window contents

Export Default {  name: ' Popup ',  props: {    text: {//text content      type:string,      default: '    }, Time    : {//Display length      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 2 properties: Text and display time. Component display hidden by internal properties visible control, only exposed to external open and Hide2 methods, 2 methods to trigger the corresponding event

Test it.

<template>  <popup ref= "popup" text= "pop-up Window contents": Time= "1e3" ></popup></template><script >import Popup from ' @/components/popup ' ...    this. $refs. Popup.open ()   ...</script>

Plug-in

The component functionality is written, but this invocation is cumbersome. For example Layer.js's call is Layer.open (...) No import, no ref, and, of course, a global reference to layer. Can we write a pop-up window that is so convenient that we need to rewrite the popup as a Vue plugin?
Said to be a plug-in, but can be configured to invoke the properties of the method or the component itself, specifically the instantiated component, and this instance must be a global singleton, so that the different Vue files when the popup is not a fight

Create a single case

Plugins/popupvm.jsimport Popup from ' @/components/popup ' $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}

After the component instantiation is added on the body, props cannot write in the HTML need JS to control, here write a method to let the property default value continue to play a role

Plugins/util.jsexport Const SETPROPS = ($VM, options) = {  Const defaults = {}  object.keys ($VM. $options. Pro PS). 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)        //Listener event        typeof options.onshow = = = ' function ' && $VM. $once (' show ', options.onshow);        typeof Options.onhide = = = ' function ' && $vm. $once (' hide ', options.onhide);        $VM. open ();      },      Hide () {        $vm. Hide ()      },      //Configuration text text      (text) {        This.open ({text})      }    }        Vue.prototype. $popup = Popup  }}

Registering plugins within the Main.js

Main.jsimport vue from ' Vue ' import popupplugin from ' @/plugins/popupplugin ' Vue.use (popupplugin)

It's very handy to call inside the Vue frame.

<script> ...    this. $popup. Text (' popup message ')  ...</script>