实现在vue项目中封装一个Toast提示组件

在vue的src目录下创建一个components来存放组件

首先在阿里云图标库中去查找项目需要的提示图，在这里我就为大家准备好了

   // success  成功   icon-toast_chenggong

   // warning  警告   icon-toast-jinggao

   // danger   失败   icon-toast-shibai_huaban

封装提示性组件就是为了高复用性

利用vuex进行状态管理在store里创建一个ToastStau文件夹+index.js

state模块中：

state: {
        // 用来表示提示框现实与隐藏状态
        isshowtoast: false,
        // 文字
        msg: "",
        // 状态值表示是否显示，通过这三状态来表示
        // success  成功
        // warning 警告
        // danger   失败
        type: ""

    },

 mutations与actions分别在状态管理器中的书写

  mutations: {
        chanisshowtoast(state, payload) {
            state.isshowtoast = payload.isshow;
            state.msg = payload.msg;
            sta