Notification 通知 ​

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

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

  const openNotification = () => {
    FNotification({
      title: '这是一条通知',
      message: '这是通知内容'
    })
  }
</script>

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

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

  const openVNode = () => {
    FNotification({
      title: h('span', [h('span', '这是'), h('b', '自定义标题')]),
      message: h('div', [
        h('p', [h('span', '这是一条'), h('b', ' 非常重要 '), h('span', '的通知')]),
        h('p', '这里是一些不重要的内容')
      ]),
      type: 'primary'
    })
  }
</script>

<template>
  <f-space>
    <f-button @click="openNotification">default</f-button>
    <f-button type="primary" @click="openNotificationPrimary">primary</f-button>
    <f-button type="success" @click="openNotificationSuccess">success</f-button>
    <f-button type="warning" @click="openNotificationWarning">warning</f-button>
    <f-button type="danger" @click="openNotificationDanger">danger</f-button>
  </f-space>
</template>

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

  const openNotification = () => {
    FNotification({
      title: '这是一条通知',
      message: '这是通知内容'
    })
  }

  const openNotificationPrimary = () => {
    FNotification.primary('这是一条重要通知')
  }

  const openNotificationSuccess = () => {
    FNotification.success('这是一条成功通知')
  }

  const openNotificationWarning = () => {
    FNotification.warning('这是一条警告通知')
  }

  const openNotificationDanger = () => {
    FNotification.danger('这是一条失败通知')
  }
</script>

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

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

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

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

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

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

  const openNotificationPlacement = (placement: NotificationPlacement): void => {
    FNotification({
      title: '一条通知',
      message: '这是一条自定义位置的消息',
      type: 'primary',
      close: true,
      duration: 0,
      placement: placement
    })
  }
</script>