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

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

1、回忆写法

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

2、Toast小细节

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

3、Toast源码

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

// createComponent 是vant中写创建的组件的方法
export default createComponent({
// 混入了 弹窗相关的数据和方法
  mixins: [PopupMixin()],
  props: {
    icon: String,
    ...
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  destroyed() {
  },
  watch: {
    value: 'toggleClickable',
    forbidClick: 'toggleClickable',
  },
  methods: {
    onClick() {
    },
    toggleClickable() {
    },
    /* istanbul ignore next */
    // transition组件的两个钩子，捕捉提示出现前后
    onAfterEnter() {
    },
    onAfterLeave() {
    },
    // 这里会返回一个html
    genIcon() {
    },
    genMessage() {
    },
  },

  render() {
    return (
      <transition
        name={this.transition}
        onAfterEnter={this.onAfterEnter}
        onAfterLeave={this.onAfterLeave}
      >
        <div
          vShow={this.value}
          class={[
            bem([this.position, { [this.type]: !this.icon }]),
            this.className,
          ]}
          onClick={this.onClick}
        >
          {this.genIcon()}
          {this.genMessage()}
        </div>
      </transition>
    );
  },
});

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

export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    render(){
        return (
            <transition name="l-fade" >
                <div class="l-toast" vShow={this.show} >
                    自定义提示
                </div>
            </transition>
        )
    }
}

4、Vue.extend( options )

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

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

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

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

function Toast(options = {}) {    
    // 获取实例
  const toast = createInstance();

  // z-index ++
  if (toast.value) {
    toast.updateZIndex();
  }
  //解析格式化传入的参数
  options = parseOptions(options);
 ...
 //添加clear 方法
  options.clear = () => {
   ...
    }
  };
  //传入的参数合并
  Object.assign(toast, transformOptions(options));
  clearTimeout(toast.timer);
  //调用
  if (options.duration > 0) {
    toast.timer = setTimeout(() => {
      toast.clear();
    }, options.duration);
  }
  return toast;
}

简易版

function Toast() {
    const toast = createInstall()
    toast.clear = () => {
        toast.show = false
    }
    clearTimeout(toast.timer)
    Object.assign(toast, defauOption)

    toast.timer = setTimeout(()=>{
        toast.clear()
    },2000)
    return toast
}

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