如何创建可重用的 Vuetify Snackbar？

Question

我正在尝试创建一个可重用的警报/小吃栏组件。我这样声明它们：

Snackbar.vue

<template>
    <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
    </v-snackbar>
</template>

<script>
export default {
    name: 'Snackbar',
    props: {
        show: String,
        color: String,
        message: String
    }
}
</script>
<template>
    <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
    </v-snackbar>
</template>

<script>
export default {
    name: 'Snackbar',
    props: {
        show: String,
        color: String,
        message: String
    }
}
</script>

我导入了，并将问题传递给他们，如下所示：

import Snackbar from '../../../components/Snackbar'

<Snackbar v-if="alert" color="alertColor" message="alertMessage" />
<Snackbar show="alert" color="alertColor" message="alertMessage" />

我已经尝试了上面的 2 行，这些是这 3 个变量的值

• 警报=

  true

• 警报颜色=

  green

• 警报消息 =

  create.vue?f4fe:631 DB error - insert_marketing_campaign: Duplicate entry 'TEST' for key 'MARKETING_CAMPAIGN_AK'

结果

我在控制台中没有看到任何错误，但也没有看到小吃栏。请帮忙

Answer 1

8！

您没有正确传递 props 值，您必须这样做：

ps。为了说明，我添加了一个事件侦听器（更新）来处理关闭按钮（如果不想使用，请删除）

<Snackbar :show="alert" :color="alertColor" :message="alertMessage" v-on:update="alert = $event" />

Snackbar.vue

我也在这里改变了一些东西：

• 在属性中使用 props 的方式是有效的，但如果不需要连接其他值，请保持简单
• prop show 必须是布尔值
• 添加了一个美丽按钮，如果你想使用
• v-model 控制小吃栏展示，但是你不能直接在 v-model 上使用 show 属性，这就是为什么我们有一个计算属性“show2”（非常有创意）来读取（get）值如果你想改变，道具 show 和 emit 自定义事件“update”它(设置)

<template>
    <v-snackbar transition="true" timeout="2000" v-model="show2" :color="color" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
        <v-btn color="red" text @click="show2 = false">Close</v-btn>
    </v-snackbar>
</template>

<script>
export default {
  props: {
    show: Boolean,
    color: String,
    message: String,
  },
  computed: {
    show2: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update", value);
      },
    },
  },
};
</script>

希望有帮助！ ;)

Answer 2

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71244492-vuex-snackbar-klfunf?file=/src/store/index.js

您可以在

App.vue

文件中设置全局小吃栏并使用

Vuex

进行更新。在您的 vuex 商店中，您设置了一个 Snackbar 对象并创建了一个简单的更新突变并显示操作。

// store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    snackbar: { active: false, color: "", message: "", timer: 4000 }
  },
  mutations: {
    UPDATE_SNACKBAR(state, snackbar) {
      state.snackbar = snackbar;
    }
  },
  actions: {
    showSnack({ commit }, { message, color, timer }) {
      commit("UPDATE_SNACKBAR", {
        active: true,
        color: color,
        message: message,
        timer: timer
      });
    }
  }
});

然后在你的

App.vue

中像这样设置

<v-snackbar
   v-model="snackbar.active"
   :color="snackbar.color"
   :right="true"
   :bottom="true"
   :timeout="snackbar.timer"
>
   {{ snackbar.message }}
   <template #action="{ attrs }">
      <v-btn
         color="white"
         text
         v-bind="attrs"
         @click="snackbar.active = false"
      >
         Close
      </v-btn>
   </template>
</v-snackbar>

<script>
import { mapState } from "vuex";
export default {
   name: 'App',
   data: () => ({
      drawer: false,
   }),
   computed: {        
    ...mapState(["snackbar"])    
   }
}
</script>

然后您可以通过执行此操作从任何组件触发您的小吃栏

// views/Home.vue
this.$store.dispatch('showSnack', {
   message: 'Testing, main page.',
   color: 'green darken-1'
})

// views/About.vue
this.$store.dispatch('showSnack', {
   message: 'Hello from about!',
   color: 'red darken-1',
   timer: 2000
})

Answer 3

<script setup>
import {
  computed
} from 'vue'

const { notificationText, modelValue } = defineProps({
  notificationText: {
    type: String,
    required: true
  },

  modelValue: {
    type: Boolean,
    required: true
  }
})

const isVisible = computed(() => modelValue)
</script>

<template>
  <v-snackbar
    v-model="isVisible"
    @update="$emit('update:modelValue', $event)">
    {{ notificationText }}
    <template #actions>
      <v-btn
        @click="$emit('update:modelValue', false)">
        Close
      </v-btn>
    </template>
  </v-snackbar>
</template>