vue3 中使用轻提示

Vue3 中可以使用多种方式实现轻提示，以下是其中两种：

1. 使用第三方库 Element-Plus 中的 Message 组件

安装 Element-Plus：

npm install element-plus --save

在 main.js 中引入 Element-Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

在需要使用轻提示的组件中，可以直接使用 Message 组件：

<template>
  <button @click="showMessage">显示轻提示</button>
</template>

<script>
import { message } from 'element-plus'

export default {
  methods: {
    showMessage() {
      message({
        message: '这是一条轻提示',
        type: 'success'
      })
    }
  }
}
</script>

2. 自定义轻提示组件

在项目中自定义一个轻提示组件，可以控制轻提示的样式和动画等细节。

<template>
  <div :class="['toast', {active: isActive, success: type === 'success', error: type === 'error'}]">{{ message }}</div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: {
    message: String,
    type: {
      type: String,
      default: 'success'
    }
  },
  setup(props) {
    const isActive = ref(false)

    watch(
      () => isActive.value,
      (val) => {
        if (val) {
          setTimeout(() => {
            isActive.value = false
          }, 2000)
        }
      }
    )

    return {
      isActive
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.toast.active {
  opacity: 1;
}

.toast.success {
  background-color: #67c23a;
}

.toast.error {
  background-color: #f56c6c;
}
</style>

在需要使用轻提示的组件中，可以动态绑定轻提示组件的 props，控制显示轻提示的时机：

<template>
  <button @click="showMessage">显示轻提示</button>
  <toast :message="message" :type="type" v-if="showToast" />
</template>

<script>
import { ref } from 'vue'
import Toast from './Toast.vue'

export default {
  components: {
    Toast
  },
  setup() {
    const showToast = ref(false)
    const message = ref('')
    const type = ref('success')

    const showMessage = () => {
      message.value = '这是一条轻提示'
      type.value = 'success'
      showToast.value = true
    }

    return {
      showMessage,
      showToast,
      message,
      type
    }
  }
}
</script>