Message 消息提示 ​

<template>
  <f-button type="primary" @click="openMessage">打开</f-button>
</template>

<script lang="ts" setup>
  import { FMessage } from 'fighting-design'

  const openMessage = () => {
    FMessage('这是一条消息提示')
  }
</script>

<template>
  <f-button type="primary" @click="openMessageVNode">打开</f-button>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import { FMessage } from 'fighting-design'

  const openMessageVNode = () => {
    FMessage({
      message: h('div', [
        h('p', [h('span', '这是一条'), h('b', ' 非常重要 '), h('span', '的消息提示')]),
        h('p', '这里是一些不重要的内容')
      ]),
      type: 'primary'
    })
  }
</script>

<template>
  <f-space>
    <f-button @click="openMessage">default</f-button>
    <f-button type="primary" @click="openMessagePrimary">primary</f-button>
    <f-button type="success" @click="openMessageSuccess">success</f-button>
    <f-button type="warning" @click="openMessageWarning">warning</f-button>
    <f-button type="danger" @click="openMessageDanger">danger</f-button>
  </f-space>
</template>

<script setup lang="ts">
  import { FMessage } from 'fighting-design'

  const openMessage = () => {
    FMessage('这是一条消息提示')
  }

  const openMessagePrimary = () => {
    FMessage.primary('这是一条重要消息提示')
  }

  const openMessageSuccess = () => {
    FMessage.success('这是一条成功消息提示')
  }

  const openMessageWarning = () => {
    FMessage.warning('这是一条警告消息提示')
  }

  const openMessageDanger = () => {
    FMessage.danger('这是一条失败消息提示')
  }
</script>

<template>
  <f-button type="primary" @click="openMessageClose1">show</f-button>
  <f-button type="primary" @click="openMessageClose2">show</f-button>
</template>

<script setup lang="ts">
  import { FMessage } from 'fighting-design'

  const openMessageClose1 = () => {
    FMessage({
      message: '这是一条5秒后消失的消息',
      type: 'primary',
      close: true,
      duration: 5000
    })
  }

  const openMessageClose2 = () => {
    FMessage({
      message: '这是一条不会自动消失的消息',
      type: 'primary',
      close: true,
      closeBtn: '关闭',
      duration: 0
    })
  }
</script>

<script setup lang="ts">
  import { FMessage } from 'fighting-design'
  import type { MessagePlacement } from 'fighting-design'

  const openMessagePlacement = (placement: MessagePlacement): void => {
    FMessage({
      message: '这是一条自定义位置的消息',
      type: 'primary',
      close: true,
      duration: 0,
      placement: placement
    })
  }
</script>

<template>
  <f-space>
    <f-button type="primary" @click="openMessagePlacement('top')">顶部</f-button>
    <f-button type="primary" @click="openMessagePlacement('top-left')">左上</f-button>
    <f-button type="primary" @click="openMessagePlacement('top-right')">右上</f-button>
    <f-button type="success" @click="openMessagePlacement('bottom')">底部</f-button>
    <f-button type="success" @click="openMessagePlacement('bottom-left')">左下</f-button>
    <f-button type="success" @click="openMessagePlacement('bottom-right')">右下</f-button>
  </f-space>
</template>