Vue + Vuetify重用快餐/警报

Posted 2021-04-08

大家好，圣诞节快乐！我是Vue的新手，我想在vuetify中重用快餐栏/警报框到我的每个组件。我通过复制粘贴每个组件的代码来做到这一点，这使其非常混乱且难以维护。

如何将其重新用于每个View 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
})

答案

您可以创建一个SnackBarComponent并将其导入到所有其他组件上

App.vue

<template>
<SnackBarComponenent :stuffProp="yourProps" />
</template>
<script>
import SnackBarComponenent from './components/SnackBarComponent'
export default {
    components:{
        ProfileOverview
     }
}
</script>

另一答案

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

请参见this answer以获取详细信息