ant-design-vue/components/notification/demo/with-btn.md
2018-09-21 10:00:52 +08:00

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>