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 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
Javascript confirm多种使用方法解析
Sep 25 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
酒店前台辞职书
2015/02/26 职场文书
无工作证明怎么写
2015/06/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript