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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Angular 容器部署的方法
Apr 17 Javascript
简述JS控制台的使用
Jul 15 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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 定界符 使用技巧
2009/06/14 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php数组去除空值函数分享
2015/02/02 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
webpack4 optimization使用总结
2019/11/10 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
python中的编码知识整理汇总
2016/01/26 Python
python实现猜数字小游戏
2020/03/24 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
电子商务专业求职信
2014/07/10 职场文书
长城英文导游词
2015/01/30 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
实习感想范文
2015/08/10 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python