vue.js开发实现全局调用的MessageBox组件实例代码


Posted in Javascript onNovember 22, 2017

前言

一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧。

源码

github地址:Talk is cheap. Show me the code.

本地下载地址:http://xiazai.3water.com/201711/yuanma/vue-messagebox(3water.com).rar

组件模板

// /src/components/MessageBox/index.vue
<template>
 <div class="message-box" v-show="isShowMessageBox">
  <div class="mask" @click="cancel"></div>
  <div class="message-content">
  <svg class="icon" aria-hidden="true" @click="cancel">
   <use xlink:href="#icon-delete" rel="external nofollow" ></use>
  </svg>
   <h3 class="title">{{ title }}</h3>
   <p class="content">{{ content }}</p>
  <div>
   <input type="text" v-model="inputValue" v-if="isShowInput" ref="input">
  </div>
   <div class="btn-group">
    <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
    <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
   </div>
  </div>
 </div>
 </template>
 
 <script>
 export default {
  props: {
  title: {
   type: String,
   default: '标题'
  },
  content: {
   type: String,
   default: '这是弹框内容'
  },
  isShowInput: false,
  inputValue: '',
  isShowCancelBtn: {
   type: Boolean,
   default: true
  },
  isShowConfimrBtn: {
   type: Boolean,
   default: true
  },
  cancelBtnText: {
   type: String,
   default: '取消'
  },
  confirmBtnText: {
   type: String,
   default: '确定'
  }
  },
  data () {
  return {
   isShowMessageBox: false,
   resolve: '',
   reject: '',
   promise: '' // 保存promise对象
  };
  },
  methods: {
  // 确定,将promise断定为resolve状态
  confirm: function () {
   this.isShowMessageBox = false;
   if (this.isShowInput) {
   this.resolve(this.inputValue);
   } else {
   this.resolve('confirm');
   }
   this.remove();
  },
  // 取消,将promise断定为reject状态
  cancel: function () {
   this.isShowMessageBox = false;
   this.reject('cancel');
   this.remove();
  },
  // 弹出messageBox,并创建promise对象
  showMsgBox: function () {
   this.isShowMessageBox = true;
   this.promise = new Promise((resolve, reject) => {
   this.resolve = resolve;
   this.reject = reject;
   });
   // 返回promise对象
   return this.promise;
  },
  remove: function () {
   setTimeout(() => {
   this.destroy();
   }, 300);
  },
  destroy: function () {
   this.$destroy();
   document.body.removeChild(this.$el);
  }
  }
 };
 </script>
 <style lang="scss" scoped>
 // 此处省略 ...
 </style>

给组件添加全局功能

vue.js官方文档中有开发插件的介绍。具体实现代码如下:

// /src/components/MessageBox/index.js

import msgboxVue from './index.vue'; 
// 定义插件对象
const MessageBox = {};
// vue的install方法,用于定义vue插件
MessageBox.install = function (Vue, options) {
 const MessageBoxInstance = Vue.extend(msgboxVue);
 let currentMsg, instance;
 const initInstance = () => {
 // 实例化vue实例
 currentMsg = new MessageBoxInstance();
 let msgBoxEl = currentMsg.$mount().$el;
 document.body.appendChild(msgBoxEl);
 };
 // 在Vue的原型上添加实例方法,以全局调用
 Vue.prototype.$msgBox = {
 showMsgBox (options) {
  if (!instance) {
  initInstance();
  }
  if (typeof options === 'string') {
  currentMsg.content = options;
  } else if (typeof options === 'object') {
  Object.assign(currentMsg, options);
  }
  return currentMsg.showMsgBox();
 }
 };
};
export default MessageBox;

全局使用

// src/main.js
import MessageBox from './components/MessageBox/index';
Vue.use(MessageBox);

页面调用

按照之前定义好的方法,可以在各个页面中愉快的调用该组件了。

this.$msgBox.showMsgBox({
 title: '添加分类',
 content: '请填写分类名称',
 isShowInput: true
}).then(async (val) => {
 // ...  
}).catch(() => {
 // ...
});

最后来张效果图

vue.js开发实现全局调用的MessageBox组件实例代码

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 中的each()跳出循环的语句
May 23 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 #Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python条件和循环的使用方法
2013/11/01 Python
Python中对列表排序实例
2015/01/04 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
医生实习工作总结的自我评价
2013/09/27 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
学雷锋标语
2014/06/25 职场文书
销售目标责任书
2014/07/23 职场文书
2016新年感言
2015/08/03 职场文书
Django实现聊天机器人
2021/05/31 Python
Python获取字典中某个key的value
2022/04/13 Python