ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue全局弹窗

2021-11-23 17:33:55  阅读:116  来源: 互联网

标签:vue FullLoginAd dom vm Vue 组件 全局 弹窗


效果:在任意页面,不需要引入组件,调用弹窗组件实例方法操作打开关闭 

 

1. 定义

1.1 定义弹窗页面

正常定义即可,需要定义方法show和hide控制组件变量显示及隐藏弹窗。

1.2 弹窗页面同级目录定义得Vue需要得js文件

注意: 搞了单例,调用多少次都是操作一个

import Vue from 'vue'
import FullLoginAd from './index.vue'

// 单例模式
let instance = null

function create (Component, props) {
    const vm = new Vue({
   /* render函数用来生成虚拟dom,接收一个createElement函数(一般称之h函数),
     并返回该函数的执行结果(生成的虚拟dom)。
      h函数接受三个参数,
      1.一个标签名或组件选项对象。
      2.与模板中属性对应的数据对象。
      3.子节点。
     生成的虚拟dom需要经过挂载($mount)才能变成真实dom
   */
    render: h => h(Component, { props })
    // 这里不指定宿主元素,因为直接指定body的话会将已有的内容替换掉。
    }).$mount() 
    /* 通过dom操作追加元素  $el可以获取真实dom */
    document.body.appendChild(vm.$el)
    /* 获取组件实例 */
    const comp = vm.$children[0]
    /* 添加销毁组件的方法 */
    comp.remove = function () {
      document.body.removeChild(vm.$el)
      vm.$destroy()
    }

    return comp
}

export default {
/* install方法实现的需求是 在使用组件时不需要再传入组件模板,只需传入参数,
   因此使用柯里化函数实现。*/
  install(Vue) {
    Vue.prototype.$fullLoginAd = function(options) {
      if (!instance){
        instance = create(FullLoginAd, options)
      }
      return instance
    }
  }
}

2. main.js使用

// 绑定到vue实例上创建登录框 import FullLoginAd from '@/components/tencentAir/ads/FullLoginAd/index.js' Vue.use(FullLoginAd)

 

3. 使用即可

// 创建实例,拿到实例对象,调用对象方法show

// 可以给show方法传递参数,达到弹窗动态展示数据得目的

this.$fullLoginAd().show()

this.$fullLoginAd().hide()

 

参考文章:

https://www.jianshu.com/p/9423f562c130

 

标签:vue,FullLoginAd,dom,vm,Vue,组件,全局,弹窗
来源: https://www.cnblogs.com/zezhou/p/15594248.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有