toast小组件

最新推荐文章于 2024-04-25 20:39:49 发布

永年一朵花

最新推荐文章于 2024-04-25 20:39:49 发布

阅读量531

点赞数

分类专栏：前端文章标签： vue.js sass elementui

本文链接：https://blog.csdn.net/qq_55791710/article/details/122113997

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<template>
  <div class="toast">{{message}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  props: ['message']
}
export const toastEffect = () => {
  const toastData = reactive({
    ToastBoolean: false,
    ToastText: ''
  })
  const { ToastBoolean, ToastText } = toRefs(toastData)
  const ToastShow = (text) => {
    toastData.ToastText = text
    toastData.ToastBoolean = true
    setTimeout(() => {
      toastData.ToastText = ''
      toastData.ToastBoolean = false
    }, 1500)
  }
  return { ToastBoolean, ToastText, ToastShow }
}
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: 0.05rem;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.5rem;
}
</style>