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 数组克隆方法 小结
Mar 20 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript里使用php代码实例
Dec 13 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python的pygame安装教程详解
2020/02/10 Python
python合并多个excel文件的示例
2020/09/23 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
采购部岗位职责
2013/11/24 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
迟到检讨书大全
2014/01/25 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js