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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
jQuery设计思想
Mar 07 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
jquery 模板的应用示例
2013/11/12 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python中模块查找的原理与方法详解
2017/08/11 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
python3处理word文档实例分析
2020/12/01 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
合伙协议书范本
2014/04/21 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
初一年级组工作总结
2015/08/12 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Python实现老照片修复之上色小技巧
2021/10/16 Python