vant 组件库中 toast组件 是怎么写的（vue2版本）

经常使用vant组件库，今天也是有空去看了看vant源码，看看能不能薅到点什么骚操作，菜是原罪，于是选择了个人认为的软柿子 Toast 来学习。

1、回忆写法

我们在使用中经常是 this.$toast({ option })，或者单纯的使用 Toast(xxx),里面可以传递对象，也可以传递单个内容，也可以通过指定的方法（success，fail）等方式来调用

2、Toast小细节

1. 多次调用只会有一个Toast存在
2. 多次调用Toast的层级会递增
3. 可以配置forbidClick实现阻止背景穿透
4. .... 正如文档所说，Toast是采用了单例模式，所以只会有一个实例（当然你也可以配置允许创建多个实例），接下来我们来看看vant中是怎么编写的

3、Toast源码

在Vant中组件都是以render函数来编写的，jsx的写法，这样可以有更好的性能，不太清楚的朋友可以去看下vue的模板编译和渲染函数的区别，大概就长这样

1// createComponent 是vant中写创建的组件的方法
2export default createComponent({
3// 混入了 弹窗相关的数据和方法
4  mixins: [PopupMixin()],
5  props: {
6    icon: String,
7    ...
8  },
9  data() {
10    return {
11    };
12  },
13  mounted() {
14  },
15  destroyed() {
16  },
17  watch: {
18    value: 'toggleClickable',
19    forbidClick: 'toggleClickable',
20  },
21  methods: {
22    onClick() {
23    },
24    toggleClickable() {
25    },
26    /* istanbul ignore next */
27    // transition组件的两个钩子，捕捉提示出现前后
28    onAfterEnter() {
29    },
30    onAfterLeave() {
31    },
32    // 这里会返回一个html
33    genIcon() {
34    },
35    genMessage() {
36    },
37  },
38
39  render() {
40    return (
41      <transition
42        name={this.transition}
43        onAfterEnter={this.onAfterEnter}
44        onAfterLeave={this.onAfterLeave}
45      >
46        <div
47          vShow={this.value}
48          class={[
49            bem([this.position, { [this.type]: !this.icon }]),
50            this.className,
51          ]}
52          onClick={this.onClick}
53        >
54          {this.genIcon()}
55          {this.genMessage()}
56        </div>
57      </transition>
58    );
59  },
60});

可以看出，toast组件以渲染函数的方式来编写，同时搭配transition组件添加过渡动画，以及自身钩子来$emit事件，这个js文件也可以直接通过组件注册的方式来使用，这样的方式肯定不太方便，我们更希望通过api的方式去调用 简易版

1export default {
2    props: {
3        show: {
4            type: Boolean,
5            default: false
6        }
7    },
8	render(){
9		return (
10			<transition name="l-fade" >
11				<div class="l-toast" vShow={this.show} >
12					自定义提示
13				</div>
14			</transition>
15		)
16	}
17}

4、Vue.extend( options )

通过这个方法，我们可以创建一个vue的子类，获取子类实例后通过$mount()指定挂载的模板，这样可以通过js的方法，获取到el后插入到body中就可以了<br/ 前面我们说Toast是采用单例模式，也就是多次调用只会产生一个实例，代码如下

1let queue = []
2function createInstall() {
3    if(!queue.length) {
4        const toast = new (Vue.extend(Toast))
5        document.body.appendChild(toast.$mount().$el)
6        queue.push(toast)
7    }
8    return queue[queue.length - 1]
9}
10这是只是简单实现了下，没有考虑配置多个实例、toast是否存在dom中的情况，现在我们就始终是得到Toast的一个实例

5、那么我们该怎么调用呢？还有参数是怎么处理的

继续往下看，发现了一个Toast函数

1function Toast(options = {}) {	
2	// 获取实例
3  const toast = createInstance();
4
5  // z-index ++
6  if (toast.value) {
7    toast.updateZIndex();
8  }
9  //解析格式化传入的参数
10  options = parseOptions(options);
11 ...
12 //添加clear 方法
13  options.clear = () => {
14   ...
15    }
16  };
17  //传入的参数合并
18  Object.assign(toast, transformOptions(options));
19  clearTimeout(toast.timer);
20  //调用
21  if (options.duration > 0) {
22    toast.timer = setTimeout(() => {
23      toast.clear();
24    }, options.duration);
25  }
26  return toast;
27}

简易版

1function Toast() {
2    const toast = createInstall()
3    toast.clear = () => {
4        toast.show = false
5    }
6    clearTimeout(toast.timer)
7    Object.assign(toast, defauOption)
8   
9    toast.timer = setTimeout(()=>{
10        toast.clear()
11    },2000)
12    return toast
13}

这个时候我们就已经可以通过函数的方式来调用Toast了，具体完善可以给Toast添加loading，success等方法