vue3 ts 实现自定义message

以下是一个基于 Vue3 和 TypeScript 实现自定义 message 的示例：

<template>
  <div>
    <button @click="showSuccessMessage">Show Success Message</button>
    <button @click="showErrorMessage">Show Error Message</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

interface Message {
  type: string;
  content: string;
}

export default defineComponent({
  name: 'CustomMessage',
  data() {
    return {
      messages: [] as Message[]
    }
  },
  methods: {
    showMessage(type: string, content: string) {
      this.messages.push({ type, content })
    },
    showSuccessMessage() {
      this.showMessage('success', 'This is a success message.')
    },
    showErrorMessage() {
      this.showMessage('error', 'This is an error message.')
    }
  }
})
</script>

<style>
.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.success {
  background-color: green;
  color: white;
}
.error {
  background-color: red;
  color: white;
}
</style>

<template>
  <div>
    <div v-for="message in messages" :key="message.content" :class="['message', message.type]">
      {{ message.content }}
    </div>
  </div>
</template>

在上述示例中，我们定义了一个 `Message` 接口，用于表示消息的类型和内容。然后，在组件中定义了一个 `messages` 数组，用于存储所有的消息。通过 `showMessage` 方法，我们可以将新的消息添加到 `messages` 数组中。最后，在模板中使用 `v-for` 指令遍历 `messages` 数组，渲染出每条消息。

我们还为消息定义了两种类型：`success` 和 `error`，并为它们分别定义了不同的样式。通过调用 `showSuccessMessage` 和 `showErrorMessage` 方法，我们可以分别显示成功消息和错误消息。