Vuetify是 Vue 的一個UI框架，幫助我們快速搭建應用。有眾多優秀的組件可供選擇：

• v-data-table 顯示表格數據
• v-dialog 實現彈框設計
• v-toolbar等實現橫向菜單
• ...

而Vuetify中的 snackbar 類似element 中的message消息提示，實現 成功、警告、消息等消息反饋。

The world's most popular Vue UI framework?element.eleme.cn

Element 為 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本頁面中的方式調用Message。

import { Message } from 'element-ui';

引入之后就可以調用 Message 諸如 .success .closeAll等各種方法來彈出或關閉消息提示。

而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 = truestate.msg = options.msgstate.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.timeoutcontext.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'})}}

總結

以上是生活随笔為你收集整理的vuetify table_vuex 封装设计全局可用的vuetify中的snackbar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。