ant-design-vue/components/vc-notification/demo/simple.jsx

/* eslint-disable no-console */
import '../assets/index.less'
import Notification from '../index'
let notification = null
Notification.newInstance({
  maxCount: 10,
}, (n) => { notification = n })

function simpleFn () {
  notification.notice({
    content: (h) => {
      return <span>simple show</span>
    },
    onClose () {
      console.log('simple close')
    },
  })
}

function durationFn () {
  notification.notice({
    content: (h) => {
      return <span>can not close...</span>
    },
    duration: null,
  })
}

function closableFn () {
  notification.notice({
    content: (h) => {
      return <span>closable</span>
    },
    duration: null,
    onClose () {
      console.log('closable close')
    },
    closable: true,
  })
}

function close (key) {
  notification.removeNotice(key)
}

function manualClose () {
  const key = Date.now()
  notification.notice({
    content: (h) => {
      return <div>
        <p>click below button to close</p>
        <button onClick={close.bind(null, key)}>close</button>
      </div>
    },
    key,
    duration: null,
  })
}

let counter = 0
let intervalKey
function updatableFn () {
  if (counter !== 0) {
    return
  }

  const key = 'updatable-notification'
  const initialProps = {
    content: `Timer: ${counter}s`,
    key,
    duration: null,
    closable: true,
    onClose () {
      clearInterval(intervalKey)
      counter = 0
    },
  }

  notification.notice(initialProps)
  intervalKey = setInterval(() => {
    notification.notice({ ...initialProps, content: `Timer: ${++counter}s` })
  }, 1000)
}

export default {
  render () {
    return (
      <div>
        <button onClick={simpleFn}>simple show</button>
        <button onClick={durationFn}>duration=0</button>
        <button onClick={closableFn}>closable</button>
        <button onClick={manualClose}>controlled close</button>
        <button onClick={updatableFn}>updatable</button>
      </div>
    )
  },
}