Vuetify + Vue3 全局提示组件

2025-04-12 04:00:27 5

环境

"dependencies": {
    "mitt": "^3.0.1",
    "vue": "^3.5.13",
    "vuetify": "^3.8.0"
}

hooks/msg.js

import mitt from "mitt";

const msgEmitter = mitt();

const onEvent = (callback: (msg: string) => void) => {
  msgEmitter.on("msg", (value: any) => {
    callback(value);
  });
};

const showMsg = (msg: string) => {
  msgEmitter.emit("msg", msg);
};

export function useMsg() {
  return { onEvent, showMsg };
}

App.vue

引入消息条, 设置持续时间2000ms, 可手动关闭, 位置在页面顶部

<v-snackbar-queue
    timer="blue-grey-lighten-4"
    color="blue-grey-lighten-5"
    location="top"
    v-model="snackMessages"
    :timeout="2000"
    closable
    close-text="✖"
  >
  </v-snackbar-queue>

对应script

import { useMsg } from "@/hooks/msg";
let { onEvent } = useMsg();

const snackMessages = ref<string[]>([]);

const showMsg = (msg: string) => {
  snackMessages.value.push(msg);
};

onEvent(showMsg);

使用

import { useMsg } from "@/hooks/msg";
let { showMsg } = useMsg();

showMsg("验证码xxxx");

• vue
• vuetify
• vue3