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


Posted in Javascript onNovember 28, 2018

前言

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

背景

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

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

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

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

不废话直接开始吧

正文

1、文件结构

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

其中

  • 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)即可,这个例子逻辑简单,这里只是记录这种方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js有序数组的连接问题
Oct 01 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
js 作用域和变量详解
Feb 16 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
vue实现微信分享功能
Nov 28 #Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
You might like
PHP Stream_*系列函数
2010/08/01 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
JavaScript使用cookie
2007/02/02 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
python比较2个xml内容的方法
2015/05/11 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python中is和==的区别详解
2018/11/15 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
出纳岗位职责
2013/11/09 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
公司年会主持词
2014/03/22 职场文书
安全环保标语
2014/06/09 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js