时间戳

首页 > 解决方案 > Vue + Vuetify 重用snackbar / alert

vue.js - Vue + Vuetify 重用snackbar / alert

问题描述

我是 Vue 的新手，我想将 vuetify 中的快餐栏/警报框重用于我的每个组件。我通过复制粘贴每个组件的代码来做到这一点，这使得它非常混乱且难以维护。

如何为我的每个视图 vue 组件重用它？

请参阅下面的示例代码。

Vue组件<模板>

 <v-snackbar
  v-model="snackbar.appear"
  :color="snackbar.color"
  :timeout="snackbar.timeout"
  :left="snackbar.x === 'left'"
  :right="snackbar.x === 'right'"
  :top="snackbar.y === 'top'"
> 
  <v-row>
    <v-icon class="mx-2" size="18" dark>{{ snackbar.icon }}</v-icon>
    {{ snackbar.text }}
  </v-row>
  <v-btn dark text @click="snackbar.appear = false">OKAY</v-btn>
</v-snackbar>

vue组件<脚本>

snackbar: {
    appear: false,
    icon: '',
    text: '',
    color: 'success',
    timeout: 2500,
    x: 'right',
    y: 'top',
  },

axios 
.post('/api/department-objective', { corporate_objective_id, objective, description })
.then(response => {
  this.snackbar.appear = true
  this.snackbar.text = response.data.text
  this.snackbar.icon = response.data.icon
})
.catch(error => {
  console.log(error)
  this.alert = true
  this.allerror = error.response.data.errors
})

标签： vue.jsvuetify.js

解决方案

我经常将应用程序范围的警报消息添加到根应用程序的组件中，例如App构建基本布局的组件并将其可见性绑定到中央存储中的erroror属性的存在。notificationvuex

有关详细信息，请参阅此答案

推荐阅读