Vue实现移动端 message-box 与 alert 弹框@郝晨光

前言

最近在做移动端的项目，需要制作移动端的alert弹框和message-box提示信息；之前使用Vue框架的element-ui时，就记得element-ui的弹框，今天深入的研究了一下源码，然后简单制作了一点小demo

用到的知识点

Vue组件的定义，Vue的extend

Vue.extend(options)

options参数是一个对象，一个Vue组件配置项的对象，例如

// 创建一个构造器，
const Profile = Vue.extend({
// 模板使用参数内的template模板
  template: `
{{message}}
`,
// data内的为默认数据
  data() {
      return {
          message: ''  
      }
  }
})
// 创建一个基于构造器的Vue实例，并且给data重新赋值
const Message = new Profile({
    data: {
        message: 'message'
    }
})
// 将这个实例挂载到 id 为 app 的DOM节点上
Message.$mount('#app');

正文

看完了基本原理，大部分同学应该就已经可以明白这个东西是怎么实现的了吧！，接着我带着大家来看看具体的实现步骤

首先需要先定义一个Vue的组件，这个组件不直接挂载到任何DOM节点中，而是作为一个模板，一个构造器来使用

可以看到这是一个非常简单的Vue组件模板，使用的是vue-cli工具构建的，最终它抛出了一个对象，而我们接着就应该来定义构造器

import Vue from 'vue'; // 引入Vue
import MessageMain from './messageMain'; // 引入上边定义好的message模板

const MessageBox = Vue.extend(MessageMain); // 使用Vue.extend来创建一个构造器
let instance; // instance 变量用来保存实例
let timer = null; // timer 变量用来保存定时器

// 定义一个function，参数为options，默认为一个对象
const Message = function(options = {}) {
    // 如果当前处在服务器端，则直接返回
	if(Vue.prototype.$isServer) return;
    // 如果当前定时器已开启，说明页面上已经有一个message-box了，则不能再继续创建新的message-box
	if(timer) return;
    // 对options做处理，如果直接传入string，则使其保存在options的message属性上
	if(typeof options === 'string') {
		options = {
			message: options
		}
	}
    // 初始化实例，并将options作为新的data传入，Vue会将options合并到原有的data上，覆盖原有的默认值，但是，在options中没有设置的是不会被改变的
	instance = new MessageBox({
		data: options
	});
    // 调用$mount方法，将当前实例渲染为真实DOM，生成$el，，如果不执行这一步，将拿不到 $el 的值，但是不指定DOM节点接管当前实例
	instance.vm = instance.$mount();
    // 使用原生js的API将当前实例的真实DOM追加到body中
	document.body.appendChild(instance.vm.$el);
    // 实例上的vm就是我们的Vue组件，所以我们可以通过vm访问到当前实例中的所有属性
    // 将visible设置为true，即显示当前message-box
	instance.vm.visible = true;
    // 开启定时器
	timer = setTimeout(() => {
       // 在时间结束后将当前实例手动卸载
		instance.vm.$destroy();
       // 使用原生API将当前实例生成的DOM节点在真实的DOM树中删除
		instance.vm.$el.parentNode.removeChild(instance.vm.$el);
       // 清除定时器
		timer = null;
	}, instance.vm.duration);
    // 定时器的时间使用vm中定义的时间
	return instance.vm;
};

// 最终抛出一个对象，对象上我们可以使用 install 来扩展Vue的插件
// 当我们的对象上有install方法的时候，它接收第一个参数为Vue，
// 我这里为了方便使用，还在当前抛出的对象上定义了一个message方法，为了方便在axios的拦截器中使用；
export default {
	message: Message,
	install(Vue) {
		Vue.prototype.$message = Message;
        Vue.message = Message;
	}
};

接着来看一下使用方法,首先要在main.js中将这个插件安装到Vue上

import Message from './plugins/Message';

Vue.use(Message); // 因为我们的对象上定义了install方法，所以可以直接调用Vue的use方法

安装完成之后，我们就可以在任意组件内使用了，这个是我们刚刚在文章开头看到的页面，现在只有调用message-box的方法；

我们直接使用this.$message就可以调用我们的message-box，并且显示都没有任何问题，当然，也可以通过传入icon和duration来修改图标和时间

看完了message-box，我想你对alert的做法也有了一定的想法了吧！接着我们来看一下alert的做法

在alert中，我们不需要定义type，也不需要修改样式，

对于alert来说，我们需要有一个头部，一个内容区，还有一个确认按钮，

而我们的内容区，使用的是v-html来渲染内容，便于我们可以使用原生的DOM标签来实现一些简单的样式

而我们在这个组件内，当点击确定按钮的时候，我们将卸载当前组件，并将当前组件从DOM结构删除

接着我们再来看定义构造器的代码

import Vue from 'vue'; // 引入Vue
import alertMain from './alertMain'; // 引入定义好的alert的模板

const AlertBox = Vue.extend(alertMain); // 创建一个构造器
let instance; // instance 变量用来保存实例

// 定义 Alert函数，接收options参数，默认为一个对象
const Alert = function(options = {}) {
	if(Vue.prototype.$isServer) return; // 判断当前如果是在服务器端渲染的话，直接返回
    // 同样的，我们还要处理options
	if(typeof options === 'string') {
		options = {
			message: options
		}
	}
    // 创建一个alert-box实例 ，将options作为新的data传入
	instance = new AlertBox({
		data: options
	});
    // 调用$mount方法，创建真实DOM，获取到vm
	instance.vm = instance.$mount();
    // 调用原生API将当前实例的真实DOM追加到body中
	document.body.appendChild(instance.vm.$el);
    // 让当前DOM显示
	instance.vm.visible = true;
	return instance.vm;
};

// 抛出对象，以及install方法，原理我们在上边已经讲过了
export default {
	alert: Alert,
	install(vue) {
		vue.prototype.$alert = Alert;
	}
}

接着就是alert-box的使用方法了，同样是需要先use一下

import Alert from './plugins/Alert';

Vue.use(Alert);

最后来使用一下这个alert-box

结言

我没有帖出css样式文件，因为样式文件其实没有多少东西，我觉得你写的会比我写的更优秀，更完美

看完这篇文章不知道你有没有什么收获，如果可以理解的话，希望你通过这篇文章写一个dialog组件，巩固一下知识，顺手点个关注

感谢您的查阅，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照