一、前言

上一篇文章讲到了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组件的方式。

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

vue：toast组件的设计与优化相关推荐

vue 筛选组件_记一个复杂组件（Filter）的从设计到开发
此文前端框架使用 rax,全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog 前言貌似在面试中,你如果设计一个 react/vue 组件,貌似已经是司空见惯的问题了 ...
[vue] 说说你对vue组件的设计原则的理解
[vue] 说说你对vue组件的设计原则的理解第一: 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值第三 ...
vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { da ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
封装 Vue.js 组件库
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读课程目标开源组件库 Element-UI iView CDD 基本介绍 CDD(Component-D ...
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...

vue：toast组件的设计与优化

文章目录