通知框 - 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