As usual ,先看效果:
info :
来看看怎么实现的吧:
还记的上一篇的vue-bus吗?不记得也没关系,点 这里,在文章末尾哈。
是不是由Vue.prototype.$bus有了灵感?
在开始之前,我们要先了解 Vue.extend(options) 用法 ---- 其使用Vue的基础构造器,options是一个包含组件选项的对象 ,要注意的点就是对象中的data必须为function!
我们先来创建一个简单构造器吧:
const Simple = Vue.extend({
template:'
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.1github.com
镇楼图 = =:
success :success
warning
error