You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/antdv-demo/docs/notification/demo/with-btn.md

1.1 KiB

#### 自定义按钮 自定义关闭按钮的样式和文字。 #### Custom close button To customize the style or font of the close button.
<template>
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
<script>
const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};
export default {
  methods: {
    openNotification() {
      const key = `open${Date.now()}`;
      this.$notification.open({
        message: 'Notification Title',
        description:
          'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small',
              },
              on: {
                click: () => this.$notification.close(key),
              },
            },
            'Confirm',
          );
        },
        key,
        onClose: close,
      });
    },
  },
};
</script>