为vuetify封装一个基于vuex的全局消息组件

vuetify是 Vue 的一个UI框架，帮助我们快速搭建应用。提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器，包括 IE11 和 Safari 9+（使用 polyfill），并提供了 8 个 vue-cli 模板。官方网站：Vuetify — A Material Design Framework for Vue.js (vuetifyjs.com)

虽然Vuetify为我们提供了这么多优秀的组件，但是去没有类似element 中的message消息提示，实现 成功、警告、消息等函数式的全局消息反馈。

所以，今天我们就用Vuetify的snackbar封装一个全局的、函数式的消息组件。

首先：我们先建立一个 store/modules/message.js文件,管理 snackbar 的变量。

const state = {
    text:'', // 提示文字
    show:false, // 是否显示
    color:'', // 颜色
    closeBtn: true, // 是否显示关闭按钮
    closeBtnType:'icon', // icon or text 关闭按钮的类型
    timeout: 5000, // 自动关闭的时间
    callback: null, // 关闭后的回调
}

let messageTimer = null;

const mutations = {
    SET_MESSAGE: (state, message) => {
        if(messageTimer){
            clearTimeout(messageTimer);
        }
        state = Object.assign(state, message);
        if(state.show && state.timeout > 0){
            // 自动关闭
            messageTimer = setTimeout(()=>{
                state = Object.assign(state, {
                    show:false,
                });
                if(state.callback && typeof state.callback === 'function'){
                    state.callback(state);
                }
            }, state.timeout);
        }
    },
}


const actions = {
    success({commit}, text){
        return new Promise((resolve, reject) => {
            commit('SET_MESSAGE', {
                text:text,
                color:'success',
                show:true,
            });
        })
    },
    error({commit}, text){
        return new Promise((resolve, reject) => {
            commit('SET_MESSAGE', {
                text:text,
                color:'error',
                show:true,
            });
        })
    },
    warning({commit}, text){
        return new Promise((resolve, reject) => {
            commit('SET_MESSAGE', {
                text:text,
                color:'warning',
                show:true,
            });
        })
    },
    info({commit}, text){
        return new Promise((resolve, reject) => {
            commit('SET_MESSAGE', {
                text:text,
                color:'info',
                show:true,
            });
        })
    },
    hide({commit}){
        return new Promise((resolve, reject) => {
            commit('SET_MESSAGE', {
                show:false,
            });
        });
    }
};


export default {
    namespaced: true,
    state,
    mutations,
    actions
}

在vuex的index 中引入这个模块：

import Vue from "vue";
import Vuex from "vuex";
// 放置全局信息
Vue.use(Vuex);

import message from "@/store/modules/message";
export default new Vuex.Store({
  modules: {
    message,
  },
});

建立一个components,位置如下：components/Message.vue

<template>
    <v-snackbar top :color="message.color" v-model="message.show">
        {{ message.text }}
        <template v-slot:action="{ attrs }">
            <v-btn v-if="message.closeBtnType==='text'" text v-bind="attrs" @click="hideMessage">关闭</v-btn>
            <v-btn icon v-else v-bind="attrs" @click="hideMessage"><v-icon>mdi-close-circle</v-icon></v-btn>
        </template>
    </v-snackbar>
</template>
<script>
export default {
    computed:{
        message(){
            return this.$store.getters.message;
        },
    },
    methods:{
        hideMessage(){
            this.$store.dispatch('message/hide');
        },
    }
}
</script>

在App.vue中引入Message组件

<template>
  <div id="app">
    <v-app>
      <router-view />
      <message />
    </v-app>
  </div>
</template>
<script>
import Message from '@/components/Message.vue'
export default {
  components:{
    Message
  },
}
</script>

由于vuex的全局属性,所以你可以项目的任意地方调用dispatch来创建消息条的实例：

methods:{
    showMessage(){
    	this.$store.dispatch('message/success','登录成功');
    },
    showError(){
    	this.$store.dispatch('message/error','登录失败');
    },
     showInfo(){
    	this.$store.dispatch('message/info','登录消息');
    },
    ...
  }

这到里，就完封装完成了，当然像全局的loading之类的者可以用上面的方法封装，大家可以试一下，我们一起讨论