Vuetify中的 snackbar 类似element 中的message消息提示，实现 成功、警告、消息等消息反馈。
vuetify的snackbar 需要自行设置：
将vuetify snackbar进行封装，用vuex 来传递消息内容。
建立 store/modules/snackbar.js,管理 snackbar 的变量。
/**
* @param msg 信息
* @param color snackbar 颜色
* @param visible 是否可见
* @param showClose 关闭按钮
* @param timeout 停留持续时间
*/
const snackbar = {
//
namespaced: true,
state: {
msg: '',
color: '',
visible: false,
showClose: true,
timeout: 5000,
},
// 逻辑处理,同步函数
mutations: {
OPEN_SNACKBAR(state, options) {
state.visible = true
state.msg = options.msg
state.color = options.color
},
CLOSE_SNACKBAR(state) {
state.visible = false
},
setShowClose(state, isShow) {
state.showClose = isShow
},
setTimeout(state, timeout) {
state.timeout = timeout
},
},
// 逻辑处理,异步函数
actions :{
openSnackbar (context,options){
let timeout = context.state.timeout
context.commit('OPEN_SNACKBAR',{
msg:options.msg,
color:options.color
})
setTimeout(()=>{
context.commit('CLOSE_SNACKBAR')
},timeout)
}
}
}
export default snackbar;
在vuex的index 中引入这个模块：
import Vue from "vue";
import Vuex from "vuex";
// 放置全局信息
Vue.use(Vuex);
import snackbar from "@/store/modules/snackbar";
export default new Vuex.Store({
modules: {
snackbar,
},
});
再在components中建立snackbar组件：
<template>
<v-snackbar top text v-model="visible" :color="color">
{{ this.$store.state.snackbar.msg }}
<!-- 关闭按钮 -->
<template v-slot:action="{ attrs }" >
<v-btn v-bind="attrs" v-if="showClose" icon @click="close" :color="color"
><v-icon>mdi-close</v-icon>
</v-btn>
</template>
</v-snackbar>
</template>
<script>
export default {
data() {
return {};
},
computed: {
visible() {
return this.$store.state.snackbar.visible;
},
showClose() {
return this.$store.state.snackbar.showClose;
},
color() {
return this.$store.state.snackbar.color;
},
},
methods: {
close() {
this.$store.commit("snackbar/CLOSE_SNACKBAR");
},
},
};
</script>
最后在App.vue中引入snackbar组件
<template>
<div id="app">
<v-app>
<router-view />
<Snackbar />
</v-app>
</div>
</template>
<script>
import Snackbar from '@/components/_partial/Snackbar.vue'
export default {
components:{
Snackbar
},
}
</script>
由于vuex的全局属性，所以你可以在页面的任何地方调用dispatch来创建消息条的实例：
methods:{
createdSnackbar(){
this.$store.dispatch('snackbar/openSnackbar',{
msg:'瓦拉伊利五路',
color:'primary'
})
}
}
