vue3【组件封装】消息提示 Toast

src/components/Toast.vue

html 复制代码
<template>
  <transition name="fade">
    <div class="fixed w-full h-full left-0 top-0 flex z-100 transition-all" v-if="show">
      <div
        :style="{ background: bgColor, color: textColor }"
        :class="['m-auto   px-4 py-2 rounded-2']"
      >
        {{ text }}
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
interface ToastType {
  type: string
  text: string
  time?: number
}

const props = defineProps<ToastType>()

const type = props.type
const bgColor = ref('#edf2fc')
const textColor = ref('#aca9b7')

if (type === 'success') {
  bgColor.value = '#f0f9eb'
  textColor.value = '#9bcb76'
} else if (type === 'error') {
  bgColor.value = '#fef0f0'
  textColor.value = '#f56c93'
} else if (type === 'warning') {
  bgColor.value = '#fdf6ec'
  textColor.value = '#e6a23c'
}

const show = defineModel({ default: false })

watch(show, () => {
  if (show.value) {
    setTimeout(() => {
      show.value = false
    }, props.time || 2000)
  }
})
</script>

使用

html 复制代码
  <button @click="show_msg = true">保存</button>

  <teleport to="body">
    <Toast v-model="show_msg" text="操作成功!" type="success"> </Toast>
  </teleport>
ts 复制代码
const show_msg = ref(false)
相关推荐
叫我阿柒啊3 小时前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊12 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊12 小时前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊1 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare2 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊2 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊2 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发
叫我阿柒啊3 天前
从Java全栈到前端框架:一场真实面试的深度技术探索
java·redis·微服务·typescript·vue3·springboot·jwt
叫我阿柒啊4 天前
从Java全栈到前端框架:一场真实的技术面试实录
java·spring boot·redis·typescript·vue3·jwt·前后端分离