vue按钮移上去显示提示_Vue实现移动端 message-box 与 alert 弹框@郝晨光

GIF.gif

前言

最近在做移动端的项目，需要制作移动端的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节点中，而是作为一个模板，一个构造器来使用

{ {message}}

// 定义每一个type对应的class类名

const typeClass = {

success: 'icon-success',

error: 'icon-error',

default: 'icon-success'

};

export default {

name: "messageMain",

// 定义的是默认数据，默认值

data() {

return {

visible: false, // 控制DOM显示隐藏

type: 'default', // 默认type值为default</