Message 轻提示 #

<script setup lang="ts">
import { Message } from '../../../packages/components/Message'

const handlePrimary = () => {
  Message.primary('primary 提示')
}

const handleSuccess = () => {
  Message.success('success 提示')
}

const handleInfo = () => {
  Message.info('info 提示')
}

const handleWarning = () => {
  Message.warning('warning 提示')
}

const handleDanger = () => {
  Message.danger('danger 提示')
}
</script>

<template>
  <vi-row>
    <vi-button @click="handlePrimary">主要提示</vi-button>
    <vi-button type="success" @click="handleSuccess">成功提示</vi-button>
    <vi-button type="info" @click="handleInfo">信息提示</vi-button>
    <vi-button type="warning" @click="handleWarning">警告提示</vi-button>
    <vi-button type="danger" @click="handleDanger">危险提示</vi-button>
  </vi-row>
</template>

<script lang="ts" setup>
import { Message } from '../../../packages/components/Message'

const handleClose = () => {
  Message({
    closable: true,
    type: 'primary',
    content: '可手动关闭'
  })
}

const handleCloseAll = () => {
  Message.closeAll()
}
</script>

<template>
  <vi-row>
    <vi-button @click="handleClose">可手动关闭</vi-button>
    <vi-button type="danger" @click="handleCloseAll">关闭所有</vi-button>
  </vi-row>
</template>

<script lang="ts" setup>
import { Message } from '../../../packages/components/Message'

const handleHtmlStr = () => {
  Message({
    isHtmlStr: true,
    type: 'primary',
    content: '<b>这是 HTML 字符串内容</b>'
  })
}
</script>

<template>
  <vi-button @click="handleHtmlStr">HTML 字符串</vi-button>
</template>

<script lang="ts" setup>
import { Message } from '../../../packages/components/Message'

const handleUnclosed = () => {
  Message({
    closable: true,
    type: 'primary',
    content: '不会自动关闭，不信你可以等，信了点这里 →',
    duration: 0
  })
}
</script>

<template>
  <vi-button @click="handleUnclosed">不自动关闭</vi-button>
</template>

<script lang="ts" setup>
import { Message } from '../../../packages/components/Message'

const custome = () => {
  Message({
    type: 'primary',
    content: '自定义图标',
    prefix: 'Home'
  })
}
</script>

<template>
  <vi-button @click="custome">自定义图标</vi-button>
</template>

<script setup lang="ts">
import { Message } from '../../../packages/components/Message'

const handleClick = (type: string, position: string) => {
  Message({
    type,
    position,
    content: `${type} Message 提示`,
  })
}
</script>

<template>
  <vi-row>
    <vi-button @click="handleClick('primary', 't-m')">默认</vi-button>
    <vi-button type="success" @click="handleClick('success', 't-l')">左上</vi-button>
    <vi-button type="success" @click="handleClick('success', 't-r')">右上</vi-button>
    <vi-button type="warning" @click="handleClick('warning', 'b-l')">左下</vi-button>
    <vi-button type="danger" @click="handleClick('danger', 'b-m')">中下</vi-button>
    <vi-button type="danger" @click="handleClick('danger', 'b-r')">右下</vi-button>
  </vi-row>
</template>