Message 全局提示组件使用文档

<template>
  <div class="demo">
    <button @click="showSuccess">成功提示</button>
    <button @click="showWarning">警告提示</button>
    <button @click="showError">错误提示</button>
    <button @click="showInfo">信息提示</button>
    <button @click="showPersistent">不自动关闭</button>
    <button @click="closeManual">手动关闭</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
// 局部引入（如果未全局注册）
// import Message from '@/components/Message'

export default defineComponent({
  setup() {
    let messageInstance = null

    // 成功提示
    const showSuccess = () => {
      this.$message.success('恭喜你，操作成功！')
      // 局部引入方式：Message.success('恭喜你，操作成功！')
    }

    // 警告提示
    const showWarning = () => {
      this.$message.warning('数据不完整，请补充后提交')
    }

    // 错误提示
    const showError = () => {
      this.$message.error('网络异常，请求失败')
    }

    // 信息提示
    const showInfo = () => {
      this.$message.info('这是一条普通的信息提示')
    }

    // 不自动关闭的提示
    const showPersistent = () => {
      messageInstance = this.$message({
        type: 'error',
        content: '此提示不会自动关闭，需手动点击×',
        duration: 0
      })
    }

    // 手动关闭提示
    const closeManual = () => {
      if (messageInstance) {
        messageInstance.close()
        messageInstance = null
      }
    }

    return {
      showSuccess,
      showWarning,
      showError,
      showInfo,
      showPersistent,
      closeManual
    }
  }
})
</script>