vue弹出alert_Vue 实现移动端 message-box 与 alert 弹框

Vue 实现移动端 message-box 与 alert 弹框

GIF.gif

前言

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

用到的知识点

Vue 组件的定义, Vue 的 extend

Vue.extend(options)

options 参数是一个对象, 一个 Vue 组件配置项的对象, 例如// 创建一个构造器,

constProfile=Vue.extend({

// 模板使用参数内的 template 模板

template:`

{{message}}

`,

// data 内的为默认数据

data(){

return{

message:''

}

}

})

// 创建一个基于构造器的 Vue 实例, 并且给 data 重新赋值

constMessage=newProfile({

data:{

message:'message'

}

})

// 将这个实例挂载到 id 为 App 的 DOM 节点上

Message.$mount('#app');

正文

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

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