通知提醒框

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
          onClick: () => {
            console.log('Notification Clicked!');
          },
        });
      },
    }
  }
</script>

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
      },
    }
  }
</script>

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
          style: {
            width: '600px',
            marginLeft: `${335 - 600}px`,
          },
        });
      },
    }
  }
</script>

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
          duration: 0,
        });
      },
    }
  }
</script>

<template>
  <div>
    <a-select v-model="selected" :style="{ width: '120px', marginRight: '10px' }">
      <a-select-option v-for="val in options" :key="val" :value="val">{{val}}</a-select-option>
    </a-select>
    <a-button type="primary" @click="openNotification">Open the notification box</a-button>
  </div>
</template>
<script>
  const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
  export default {
    data () {
      return {
        options,
        selected: 'topRight',
      }
    },
    watch: {
      selected(val) {
        this.$notification.config({
          placement: val,
        });
      }
    },
    methods: {
      openNotification (val) {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        });
      },
    }
  }
</script>

<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>

<template>
  <div>
    <a-button @click="() => openNotificationWithIcon('success')">Success</a-button>
    <a-button @click="() => openNotificationWithIcon('info')">Info</a-button>
    <a-button @click="() => openNotificationWithIcon('warning')">Warning</a-button>
    <a-button @click="() => openNotificationWithIcon('error')">Error</a-button>
  </div>
</template>
<script>
  export default {
    methods: {
      openNotificationWithIcon (type) {
        this.$notification[type]({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        });
      },
    }
  }
</script>

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  const key = 'updatable'
  export default {
    methods: {
      openNotification () {
        this.$notification.open({
          key,
          message: 'Notification Title',
          description: 'description.',
        });
        setTimeout(() => {
          this.$notification.open({
            key,
            message: 'New Title',
            description: 'New description.',
          });
        }, 1000);
      },
    }
  }
</script>