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, timeou