Message 消息弹框组件

这是基础按钮组件，支持不同类型。以下示例展示如何使用带 yf- 前缀的 message 组件：

基础用法

<template>
  <div class="demo-message">
    <yf-button type="primary" @click="show('primary')">Primary</yf-button>
    <yf-button type="success" @click="show('success')">Success</yf-button>
    <yf-button type="warning" @click="show('warning')">Warning</yf-button>
    <yf-button type="danger" @click="show('danger')">Danger</yf-button>
    <yf-button type="info" @click="show('info')">Info</yf-button>
  </div>
</template>

<script setup lang="ts">
// import { showMessage } from 'xiaofeng-ui'
import { showMessage } from '@/components/yf-message';


function show(type: 'primary' | 'success' | 'warning' | 'danger' | 'info') {
  showMessage({
    message: `这是一条 ${type} 消息`,
    type,
    duration: 2000
  });
}
</script>

<style scoped>
.demo-message {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
}
</style>

plain用法

<template>
  <div class="demo-message-plain">
    <yf-button type="primary" plain @click="show('primary')">Plain Primary</yf-button>
    <yf-button type="success" plain @click="show('success')">Plain Success</yf-button>
    <yf-button type="warning" plain @click="show('warning')">Plain Warning</yf-button>
    <yf-button type="danger" plain @click="show('danger')">Plain Danger</yf-button>
    <yf-button type="info" plain @click="show('info')">Plain Info</yf-button>
  </div>
</template>

<script setup lang="ts">
// import { showMessage } from 'xiaofeng-ui'
import { showMessage } from '@/components/yf-message';

function show(type: 'primary' | 'success' | 'warning' | 'danger' | 'info') {
  showMessage({
    message: `这是一条 ${type} 类型的 plain 消息`,
    type,
    plain: true,
    duration: 2500
  });
}
</script>

<style scoped>
.demo-message-plain {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
}
</style>