VUE3二次封装vuetify3的snackbar

封装效果，实现使用函数调用 toastmessage.show({value1:‘’,value2:‘’})

简单的消息提示，使用时只需要传入样式类型、消息、颜色即可。

实现部分

其实就是在需要消息提示的的页面创建一个snackbar，然后传递参数

• 创建一个ToastMessage的文件夹存放在components下

• 

• 其中ToastMessage文件夹中有两个文件分别是ToastMessage.vue和index.ts

• 代码如下

ToastMessage.vue
看注释

//ToastMessage.vue 
<template>
//vuetify3的snackbar组件
  <v-snackbar
    :timeout="2000"
    :color="color"
    :variant="variant"
    v-model="snackbar"
  >{{message}}
  <template v-slot:actions>
        <v-btn
          color="white"
          variant="text"
          @click="snackbar = false"
        >
          关闭
        </v-btn>
      </template>
  </v-snackbar>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  type VARIANT = "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | undefined;
  type COLOR = 'success'| 'info'| 'warning'| 'error' | string;
// 接收数据
 defineProps<{
 //可以自己定义其他的参数
    //snackbar: boolean,//状态  注销：调用即显示 所以不需要
    color: COLOR, //颜色
    variant: VARIANT,//类型
    message: string//消息提示
  }>()
  // 信息提示状态 因为Props接受的数据是只读
  const snackbar = ref<boolean|undefined>()

  const show = () => {
    // 调用即显示 所以不需要传递snackbar参数
    snackbar.value = true
  }
//将show方法暴露出去
  defineExpose({
    show,
  })
</script>

index.ts

import { createApp } from 'vue'
import ToastMessage from './ToastMessage.vue'
import vuetify from '@/plugins/vuetify'

const toastMessage  = (options:{})  => {
	// 创建元素节点
  const rootNode = document.createElement("div")
  // 在body标签内部插入此元素
  document.body.appendChild(rootNode)
  // 创建应用实例（第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props，就是<v-snackbar :props="options" />）
  const app = createApp(ToastMessage, {
    ...options,
    hide() {
      // 卸载已挂载的应用实例
      app.unmount();
      // 删除rootNode节点
      document.body.removeChild(rootNode)
    }
  })
  //新创建的app中没有引用vuetify时会报错提示vuetify没有实例
  //可以参考 https://github.com/vuetifyjs/vuetify/discussions/16026
    app.use(vuetify)
  // 将应用实例挂载到创建的 DOM 元素上
  return app.mount(rootNode)
}

// 注册插件app.use()会自动执行install函数
toastMessage.install = (app:any) => {
  // 注册全局属性，类似于 Vue2 的 Vue.prototype
  app.config.globalProperties.$toastMessage = (options:any) => toastMessage(options).show()
}
// 定义show方法用于直接调用
toastMessage.show = (options:any) => toastMessage(options).show()

export default toastMessage

使用

在需要使用到消息提示的页面引入

import $toastMessage from '@/components/ToastMessage/index'

函数调用

$toastMessage.show({
    color: "success",
    variant:"tonal",
    message:"测试消息"
  })