Material Design风格神框架vuetify 学习笔记

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'
      })
    }
  }

原文地址: https://zhuanlan.zhihu.com/p/269245401