pc-component-v5/examples/notify/NotifyExample.vue

<template>
  <div>
    <h1>Notify Example</h1>
  </div>
  <a-space>
    <a-button @click="show">show方法</a-button>
    <a-button @click="notice">notice方法</a-button>
    <a-button @click="noticeBig">noticeBig方法</a-button>
    <a-button @click="info">info方法</a-button>
    <a-button @click="infoBig">infoBig方法</a-button>
    <a-button @click="success">success方法</a-button>
    <a-button @click="error">error方法</a-button>
    <a-button @click="open">antd原生open方法</a-button>
  </a-space>
</template>

<script setup>
import { h, ref } from 'vue';
import { Button, notification, message } from 'ant-design-vue';
import Notify from '../../packages/common/Notify.js';

const test = ref('你好');
const handleClose = () => {
  message.success(test.value);
};
const show = () => {
  Notify.show({
    title: '提示',
    message: '这是一个提示',
    buttons: [
      {
        label: '确定',
        cssClass: 'btn-primary',
        action: function (dialogItself) {
          console.log('确定', dialogItself);
          dialogItself.close();
          handleClose();
        },
      },
      {
        label: '取消',
        action: function (dialogItself) {
          console.log('取消', dialogItself);
          dialogItself.close();
        },
      },
    ],
  });
};

const notice = () => {
  Notify.notice('提示', '这是一个提示', 3000);
};

const noticeBig = () => {
  Notify.noticeBig('提示', '这是一个提示');
};

const info = () => {
  Notify.info('提示', '这是一个提示', 2000);
};

const infoBig = () => {
  Notify.infoBig('提示', '这是一个提示', 2000);
};

const success = () => {
  Notify.success('提示', '这是一个提示', 6000);
};

const error = () => {
  Notify.error('提示', '这是一个提示', 2000);
};

const open = () => {
  const key = `notify_${Date.now()}`; // 生成唯一标识 
  notification.open({
    message: '提示',
    description: '这是一个提示',
    duration: 0,
    key,
    btn: () =>

      h(
        Button,
        {
          type: 'primary',
          size: 'small',
          onClick: () => {
            console.log('确认');
            notification.close(key);
          },
        },
        {
          default: () => '确认',
        },
      ),
    onClose: console.log('close'),
  });
};

</script>