vue：toast组件的设计与优化

---

一、前言

上一篇文章讲到了toast组件的样式以及淡入、淡出的过渡动画设计。这篇文章主要讲解如何根据不同的需求展示不同的弹框组件。

---

二、需求分析

我希望不同的用户处理显示不同的弹框消息和图标，因此我设计了一个msg值传入弹框消息，type值绑定iconfont图标，以此来实现我的需求。

三、步骤

1.tosat组件的template

type值分为3个，success表示消息发送成功，warning表示警告，danger表示消息发送失败。代码如下：

<template>
  <div class="toast fade">
    <i class="iconfont" :class="type==='success'?'icon-toast_chenggong':type==='danger'?'icon-toast-shibai_huaban':'icon-toast-jinggao'"></i>
    <span>{{msg}}</span>
  </div>
</template>

2.在需要的地方传入msg和type值

首先进行引入：

import { mapMutations,mapState,mapActions} from 'vuex'

调用：

this.asyncChanIsshowToast({
      msg:"登录成功",
      type:"success"
      }) 

3.代码优化及复用

为了防止每次需要调用函数的地方都要开启、关闭toast组件，导致代码十分冗长，这里将函数在上一篇中开启和关闭简单调用抽取成了vuex中的异步函数asyncChanIsshowToast，代码如下：

export default {
  namespaced: true,
  state: {
    isshowToast: false,
    msg: "",
    type: ""
  },
  getters: {
  },
  mutations: {
    chanIsshowToast(state, payload) {
      state.isshowToast = payload.isShow,
        state.msg = payload.msg,
        state.type = payload.type
    }
  },
  actions: {
    asyncChanIsshowToast({ commit }, payload) {
      //开启
      commit('chanIsshowToast', {
        isShow: true,
        msg: payload.msg,
        type: payload.type
      })
      //关闭
      setTimeout(() => {
        commit('chanIsshowToast', {
          isShow: false,
          msg: payload.msg,
          type: payload.type
        })
      }, 2000)
    }
  },
  modules: {
  }
}

setTimeout()作为异步函数只能放在actions中，且要通过commit()触发mutations中的方法来修改state。这里把之间的isShow布尔值也一同放进了vuex，这样就不需要在调用时每次手动传入isShow布尔值了。

4.在组件内部调用代码

在组件内部调用代码比较简单：

import { mapMutations,mapActions } from 'vuex'
...
...mapActions({
  asyncChanIsshowToast:"ToastStatus/asyncChanIsshowToast"
    })
...
this.asyncChanIsshowToast({
        msg:"请输入短信验证码",
        type:"warning"
      }) 

5.在组件外部（拦截器）调用代码

因为拦截器不在组件内部，所以不能用this方式调用，需要引入store并运用store.dispatch方法书写如下代码：

import axios from "axios"
import store from "@/store"

//创建axios实例（instance）
const instance = axios.create({
  baseURL: "http://kumanxuan1.f3322.net:8881/cms",
  timeout: 5000
  //如果5s后未响应，就通知用户页面存在加载错误
})

//请求拦截器
instance.interceptors.request.use(config => {
  //什么时候执行这个函数？-发送请求之前
  //cofig是什么？-记录了本次请求相关信息的一个对象
  //这个函数能用来做什么？-做一些请求前可进行的操作（如添加请求头、获取token）
  console.log("执行了请求拦截器", config);
  return config
}, err => {
  return Promise.reject(err)
});

//响应拦截器
instance.interceptors.response.use(res => {
  //什么时候执行这个函数？-在接收到后端服务器的相应之后，进入到组件内部的then方法之前执行这里的代码
  //res是什么？-记是axios封装好的一个响应对象
  //这个函数能用来做什么？-做一些统一的数据处理
  let res_data = res.data;
  if (res_data.code != 0) {
    store.dispatch("ToastStatus/asyncChanIsshowToast", {
      //因为是模块化的，所以要写文件夹名称/函数名
      msg: res_data.message,
      type: "danger"
    })

    return false
  }
  console.log("执行响应拦截器", res);
  return res_data//return后的值被组件中的请求的then方法的res接收
}, err => {
  //相当于在组件中，发送请求之后的catch方法
  store.dispatch("ToastStatus/asyncChanIsshowToast", {
    msg: err,
    type: "danger"
  })
  return Promise.reject(err)
  //直接抛出异常，看见红色警告
});

//导出
export default instance

---

四、总结

本文主要介绍了如何根据不同的需求展示不同的弹框组件，关于弹框的部分就正式完成了。

在这两篇关于弹框的文章中，我们一共完成了这些内容：
1）设计了组件结构样式；
2）将显示和隐藏的变量（isShowToast）放在了vuex中；
3）用transition过渡组件设计了淡入及淡出的效果（在vue中，设计过渡方式就使用加类名的方式，vant会有不同）；
4）设计传入msg和type值，方便每次调用时传入文本和图标；
5）定时器隐藏Toast组件；
6）把定时器抽取到actions方法中；
7）两种调用Toast组件的方式。

下一篇将讲解通过二维码扫描实现微信登录该如何设计~今天的复盘就到此结束啦！