Notify

说明

下述演示为了视觉效果将 renderInPlace 属性设为了 true 以让弹出层原地渲染，实际使用最好不要添加该属性以让通知渲染到 document.body 下避免样式污染问题。

但如果你要自定义样式，譬如自定义通知背景色、字体颜色等，可将 renderInPlace 设为 true。

基础用法

<template>
  <div>
    <button @click="handleClick">打开通知</button>

    <d-notify
      v-model="visible"
      render-in-place
      message="默认展示危险通知 1500 毫秒"
    />
  </div>
</template>

<script>
  export default {
    data: () => ({ visible: false }),

    methods: {
      handleClick() {
        this.visible = !this.visible;
      },
    },
  };
</script>

各种类型

<template>
  <div>
    <button @click="handleClick('primary')">打开主要通知</button>
    <button @click="handleClick('success')">打开成功通知</button>
    <button @click="handleClick('danger')">打开危险通知</button>
    <button @click="handleClick('warning')">打开警告通知</button>

    <d-notify
      v-model="visible"
      :type="type"
      render-in-place
      :message="`${type} 类型的通知`"
    />
  </div>
</template>

<script>
  export default {
    data: () => ({ visible: false, type: 'primary' }),

    methods: {
      handleClick(type) {
        this.type = type;
        this.visible = !this.visible;
      },
    },
  };
</script>

自定义展示时长

<template>
  <div>
    <button @click="handleClick(3000)">打开通知（展示3000毫秒）</button>
    <button @click="handleClick(0)">打开通知（一直展示）</button>

    <d-notify
      v-model="visible"
      :duration="duration"
      render-in-place
      :message="`展示时长 ${duration || '无限'} 毫秒的通知`"
    />
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
      duration: 3000,
    }),

    methods: {
      handleClick(duration) {
        this.duration = duration;
        this.visible = !this.visible;
      },
    },
  };
</script>

API

属性

名称	说明	类型	默认值
visible v-model	通知是否显示	boolean	必填
type	通知类型	primary | success | warning | danger	danger
message	展示文案	string	必填
duration	展示时长，单位：ms，设为 0 一直展示	number	1500
renderInPlace	是否原地渲染，默认会将弹出层渲染到 document.body 下以避免样式污染	boolean	false

插槽

名称	说明	参数
default	展示文案，如果和属性 message 同时出现，此项优先级更高	无

事件

名称	说明	参数
visibleChange	通知显示状态变化时触发	名称 说明 类型 visible 当前是否显示 boolean

贡献者

无