Vue触发式全局组件构建的方法

前言

在开发中总会遇到一些全局组件,如果通过import导入,components挂载就显得冗余,而一些ui框架(诸如 elementui、iview等)通过调用触发的形式就显得很便捷,本文就是简单的构建一个类似组件

背景

前几月公司开发一个小程序后台管理系统,客户可以通过在pc后台管理系统中定制自己的微信小程序,包括结构更改、数据上传等,通过将页面结构抽象成数据的方法,*控制小程序的展示方式(横向抽出每个模块)

而这其中频繁使用到图片上传,每个模块都得使用,无论是cv大法还是import都显得不太方便,这就显现出触发式全局注册组件的优势

不废话直接开始吧

正文

1、文件结构

其中

• template.vue: 是页面结构
• init.js: 是初始化操作,就处理调用参数注入
• index.js: 抛出接口,用于vue.use()注册

2、文件解析

template.vue文件没有太多可说的,只是你要展示的dom结构,除了本身逻辑,只要预留出显示隐藏的方法、数据回传等一些业务需要的功能

/**
   * onshow - 控制组件显示
   *
   * @return {type}
   */
  onshow() {
   this.uploadmodalshow = true
  },

init.js:

import uploadmodalcomponent from './template.vue'
import vue from 'vue'

// 构造组件
let uploadmodalconstructor = vue.extend(uploadmodalcomponent);
// 组件实例
let $vue;
// 生成dom
let inituploadmodal = ()=>{
  // 实例化
  $vue = new uploadmodalconstructor({
    el: document.createelement('div')
  });
  // 注入页面
  document.body.appendchild($vue.$el);
}

const uploadmodal = (success = () => {}, fail = () => {}) => {
 // 初始化构架dom结构
 inituploadmodal()
 // 注入回调函数
 if (success instanceof function) $vue.success = success;
 else console.error('传入成功回调函数');
 if (fail instanceof function) $vue.fail = fail;
 else console.error('传入失败回调函数');
 // 组件显示
 $vue.onshow()
}

export default uploadmodal

index.js:

// 图片上传弹框工具

import uploadmodel from './init.js'

const uploadmodel = {
 install(vue) {
   //注册全局组件
   vue.component(uploadmodel.name, uploadmodel)

   //添加全局api
   vue.prototype.$uploadmodel = uploadmodel
 }
}
export default uploadmodel;

需要使用时通过

// 更换图片
import showuploadmodal from './plugin/uploadmodal';
vue.use(showuploadmodal);

this.$uploadmodel (opts)即可,这个例子逻辑简单,这里只是记录这种方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。