五.通知

前言

• 扩展error、success、warning、info四个方法

默认

<template>
  <web-button plain @click="open1"> Success </web-button>
  <web-button plain @click="open2"> Warning </web-button>
  <web-button plain @click="open3"> Info </web-button>
  <web-button plain @click="open4"> Error </web-button>
</template>

<script lang="ts" setup>
import WebNotification from 'components/notification/index'

const open1 = () => {
  WebNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}

const open2 = () => {
  WebNotification({
    title: 'Warning',
    message: 'This is a warning message',
    type: 'warning',
  })
}

const open3 = () => {
  WebNotification({
    title: 'Info',
    message: 'This is an info message',
    type: 'info',
  })
}

const open4 = () => {
  WebNotification({
    title: 'Error',
    message: 'This is an error message',
    type: 'error',
  })
}
</script>

自定义

<template>
  <web-button plain @click="open1"> 错误 </web-button>
  <web-button plain @click="open2"> 成功 </web-button>
  <web-button plain @click="open3"> 警告 </web-button>
  <web-button plain @click="open4"> 提示 </web-button>
</template>

<script lang="ts" setup>
import WebNotification from 'components/notification/index'

const open1 = () => {
  WebNotification.error()
}

const open2 = () => {
  WebNotification.success()
}

const open3 = () => {
  WebNotification.warning()
}

const open4 = () => {
  WebNotification.info()
}
</script>