antd vue关闭模态对话框_构建基于Vue 2 的仿antd的toast消息提示插件

As usual ，先看效果：

info :

来看看怎么实现的吧：

还记的上一篇的vue-bus吗？不记得也没关系，点 这里，在文章末尾哈。

是不是由Vue.prototype.$bus有了灵感？

在开始之前，我们要先了解 Vue.extend(options) 用法 ---- 其使用Vue的基础构造器，options是一个包含组件选项的对象 ，要注意的点就是对象中的data必须为function！

我们先来创建一个简单构造器吧：

const Simple = Vue.extend({

template:'

\

{{text}}

\

',

data(){

return {

text:'It's great!'

}

}

});

const Tpl = new Simple();

const toastTpl = Tpl.$mount().$el; //挂载到$el

一样的道理，我们在Vue.prototype.$toast 里面是不是也要创建个Vue构造器构造toast组件？

1. 分析：

这一步很重要，coding之前，有清晰的思路是事半功倍的关键！

a. 图标准备

b. toast组件构造挂载

1) toast组件接收参数(type , message , duration)分别是提示类型，提示信息 ，提

示时间. 其中type有四种类型

2) 其中toast组件只挂载显示一次，可以用一个全局对象toastContainer来接收它以及

showToast 来判断当前页面是否已经显示toast了,下面是代码Box

let toastContianer = null;

let showToast = false;

const Toast = (Vue) = > {

Vue.prototype.$toast = (type , message , duration) => {

if(showToast) return;

if(!toastContainer){

const toastTpl = Vue.extend({

template:'',

data(){

show:showToast，

msg:message

}

});

//挂载 toastContainer = new toastTpl();

const tpl = toastContainer.$mount().$el;

//DOM添加 document.body.append(tpl);

}

//显示toast //关闭toast }

}

Nice - - 思路大概清晰了~

= = 开始

2. 目录结构：

3. iconfont制作：点这里 , 挑选完icon就下载下来吧

我们先看下icon的用法：

a. 让我们在vue-toast-v.1.0.js 中 import 引入 iconfont.js文件

b. toast.scss中添加css通用代码：

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

c. 使用

3.template构建：

type是做这个组件的关键，我们来通过type关联组件对应的css样式和icon图标吧，css命名的时 候也是与type对应哈~

let toastContianer = null;

let showToast = false;

const Toast = (Vue) = > {

Vue.prototype.$toast = (type , message , duration) => {

if(showToast) return;

if(!toastContainer){

const toastTpl = Vue.extend({

template:'\

\

\

\

\

\

\

\

{{msg}}

\

\

\

',

data(){

show:showToast，

msg:message

}

});

//挂载

toastContainer = new toastTpl();

const tpl = toastContainer.$mount().$el;

//DOM添加

document.body.append(tpl);

}

//显示toast

//关闭toast

}

}

transition动画不了解的话可以看下官网= =

4.显示toast:

toastContainer.show = showToast = true;

5.关闭toast

setTimeout 设置下就好啦 ~

setTimeout(()=>{

toastContainer.show = showToast = false;

},duration)

6.使用：

import 引入 Vue.use()之后可以全局使用，wonderful ~

* @description vue-toast

* @param type 提示类型

* @param message 提示信息

* @param duration 提示时间(毫秒)

*

*

* use:

* import toast from 'vue-toast';

* Vue.use(toast);

*

* this.$toast('error','message',duration);

* this.$toast('success','message',duration);

* this.$toast('warning','message',duration);

* this.$toast('info','message',duration);

OK ! Finish 就是这么简单做好啦 enjoy coding~

想要查看最新的代码 ， github欢迎 starSoldierAb/vue-toast-v.1.1​github.com

镇楼图 = =：

success :success

warning

error