如何實現(xiàn)Element Notification通知

<template>
 <el-button
  plain
  @click="open1">
  可自動關(guān)閉
 </el-button>
 <el-button
  plain
  @click="open2">
  不會自動關(guān)閉
  </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    const h = this.$createElement;

    this.$notify({
     title: '標題名稱',
     message: h('i', { style: 'color: teal'}, '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案')
    });
   },

   open2() {
    this.$notify({
     title: '提示',
     message: '這是一條不會自動關(guān)閉的消息',
     duration: 0
    });
   }
  }
 }
</script>

<template>
 <el-button
  plain
  @click="open1">
  成功
 </el-button>
 <el-button
  plain
  @click="open2">
  警告
 </el-button>
 <el-button
  plain
  @click="open3">
  消息
 </el-button>
 <el-button
  plain
  @click="open4">
  錯誤
 </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    this.$notify({
     title: '成功',
     message: '這是一條成功的提示消息',
     type: 'success'
    });
   },

   open2() {
    this.$notify({
     title: '警告',
     message: '這是一條警告的提示消息',
     type: 'warning'
    });
   },

   open3() {
    this.$notify.info({
     title: '消息',
     message: '這是一條消息的提示消息'
    });
   },

   open4() {
    this.$notify.error({
     title: '錯誤',
     message: '這是一條錯誤的提示消息'
    });
   }
  }
 }
</script>

<template>
 <el-button
  plain
  @click="open1">
  右上角
 </el-button>
 <el-button
  plain
  @click="open2">
  右下角
 </el-button>
 <el-button
  plain
  @click="open3">
  左下角
 </el-button>
 <el-button
  plain
  @click="open4">
  左上角
 </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    this.$notify({
     title: '自定義位置',
     message: '右上角彈出的消息'
    });
   },

   open2() {
    this.$notify({
     title: '自定義位置',
     message: '右下角彈出的消息',
     position: 'bottom-right'
    });
   },

   open3() {
    this.$notify({
     title: '自定義位置',
     message: '左下角彈出的消息',
     position: 'bottom-left'
    });
   },

   open4() {
    this.$notify({
     title: '自定義位置',
     message: '左上角彈出的消息',
     position: 'top-left'
    });
   }
  }
 }
</script>

<template>
 <el-button
  plain
  @click="open">
  偏移的消息
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify({
     title: '偏移',
     message: '這是一條帶有偏移的提示消息',
     offset: 100
    });
   }
  }
 }
</script>

<template>
 <el-button
  plain
  @click="open">
  使用 HTML 片段
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify({
     title: 'HTML 片段',
     dangerouslyUseHTMLString: true,
     message: '<strong>這是 <i>HTML</i> 片段</strong>'
    });
   }
  }
 }
</script>

<template>
 <el-button
  plain
  @click="open">
  隱藏關(guān)閉按鈕
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify.success({
     title: 'Info',
     message: '這是一條沒有關(guān)閉按鈕的消息',
     showClose: false
    });
   }
  }
 }
</script>