通知框 - Notification

自定义展示的全局通知弹窗。

基础使用方法

自定义标题和内容

通过title设置通知标题,通过message设置通知内容。

默认右上角弹出,4秒后自动关闭。

<c-button primary @click="createNtf">通知</c-button>

<script>
  export default {
    methods: {
      createNtf () {
        this.$notify({
          title: '《菩萨蛮(其四)》',
          message: '珍重主人心,酒深情亦深。'
        })
      }
    }
  }
</script>

指定关闭时间

通过duration设置通知显示时间,值为0时表示通知不会自动关闭。

<c-button primary @click="createNtf1">不消失</c-button>
<c-button primary @click="createNtf2">2秒后消失</c-button>

<script>
  export default {
    methods: {
      createNtf1 () {
        this.$notify({
          title: '《长安秋望》',
          message: '云雾凄清拂曙流,汉家宫阙动高秋。',
          duration: 0
        })
      },
      createNtf2 () {
        this.$notify({
          title: '《长安秋望》',
          message: '残星几点燕横塞,长笛一声人倚楼。',
          duration: 2000
        })
      }
    }
  }
</script>

指定弹出方位

通过position设置通知弹出方位,可分别设置为右上角、右下角、左下角、左上角。

<c-button primary @click="createNtf1">右上角</c-button>
<c-button primary @click="createNtf2">右下角</c-button>
<c-button primary @click="createNtf3">左下角</c-button>
<c-button primary @click="createNtf4">左上角</c-button>

<script>
  export default {
    methods: {
      createNtf1 () {
        this.$notify({
          title: '《道德经》',
          message: '万物持之以生而不辞,功成而不有。',
          position: 'topRight'
        })
      },
      createNtf2 () {
        this.$notify({
          title: '《道德经》',
          message: '衣养万物而不为主,可名于小。',
          position: 'bottomRight'
        })
      },
      createNtf3 () {
        this.$notify({
          title: '《道德经》',
          message: '万物归焉而不为主,可名为大。',
          position: 'bottomLeft'
        })
      },
      createNtf4 () {
        this.$notify({
          title: '《道德经》',
          message: '以其终不自为大,故能成其大。',
          position: 'topLeft'
        })
      }
    }
  }
</script>

设置通知类型

通过type设置通知类型,用来显示成功 / 警告 / 消息 / 错误型系统消息。

<c-button primary @click="createNtf1">成功</c-button>
<c-button primary @click="createNtf2">警告</c-button>
<c-button primary @click="createNtf3">消息</c-button>
<c-button primary @click="createNtf4">错误</c-button>

<script>
  export default {
    methods: {
      createNtf1 () {
        this.$notify({
          title: '《汉江临汎》',
          message: '楚塞三湘接,荆门九派通。',
          type: 'success'
        })
      },
      createNtf2 () {
        this.$notify({
          title: '《汉江临汎》',
          message: '江流天地外,山色有无中。',
          type: 'warning'
        })
      },
      createNtf3 () {
        this.$notify({
          title: '《汉江临汎》',
          message: '郡邑浮前浦,波澜动远空。',
          type: 'info'
        })
      },
      createNtf4 () {
        this.$notify({
          title: '《汉江临汎》',
          message: '襄阳好风日,留醉与山翁。',
          type: 'error'
        })
      }
    }
  }
</script>

指定偏移位置

可通过offset设置通知框的偏移量

<c-button primary @click="createNtf">偏移100px</c-button>

<script>
  export default {
    methods: {
      createNtf () {
        this.$notify({
          title: '《拟行路难(其四)》',
          message: '心非木石岂无感,吞声踟蹰不敢言。',
          offset: 100
        })
      }
    }
  }
</script>

自定义HTML片段

dangerouslySetInnerHTML设置为true,即可将message作为HTML片段。

默认右上角弹出,4.5秒后自动关闭。

<c-button primary @click="createNtf">使用HTML片段</c-button>

<script>
  export default {
    methods: {
      createNtf () {
        this.$notify({
          title: '《玉楼春》',
          message: '<span style="color:chocolate">渐行渐远渐无书,水阔鱼沉何处问。</span>',
          dangerouslySetInnerHTML: true
        })
      }
    }
  }
</script>

属性说明

属性 类型 默认值 说明 可选值
title String - 标题 -
message String - 提醒内容 -
duration Number 4000 显示时间 -
position String topRight 弹出位置 topRight / topLeft / bottomRight / bottomLeft
type String - 提示类型 success / warning / info / error
offset Number 0 偏移位置 -
dangerouslySetInnerHTML Boolean false 是否将message作为HTML片段 true / false