vue3 | 组合式api | 原生代码写toast组件 | 父组件给子组件传参

vue3原生代码实现消息弹窗toast

效果图：

demo：

toast组件：

<template>
  <div class="toast">
    <p>{{ props.init }}</p>
  </div>
</template>

<script setup>
const props = defineProps(['init'])
</script>

<style lang="scss" scoped>
#app {
  position: relative;
  .toast {
    width: 300px;
    height: auto;
    background-color: #d5d7da;
    border-radius: 50px;
    position: absolute;
    top: 310px;
    left: 37.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: toast 4s ease-in-out;
    p {
      font-size: 16px;
      color: white;
      padding: 5px 10px;
      text-align: center;
    }
  }
  @keyframes toast {
    from {
      background-color: #d5d7da;
    }
    to {
      background-color: transparent;
    }
  }
}
</style>

然后在需要toast的文件中引入：

<template>
    <div @click="toastWay"></div>
    <!-- 引入toast组件 -->
    <Toast :init="msg" v-if="isToast == true" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Toast from '@/components/toast'

const msg = ref('')
const isToast = ref(false)
const toastWay =（）=> {
    isToast.value = !isToast.value
    msg.value = 'toast内容'
    
    setTimeOut(async() => {
        isToast.value = !isToast.value
    },4000)
    
}
</script>