Vue DevUI
主题

Notification 全局通知

全局信息提示组件。

何时使用

当需要向用户全局展示提示信息时使用，显示数秒后消失。

基本用法

推荐使用服务方式调用，默认情况只展示消息内容和关闭按钮。
<template>
  <d-button @click.native="showService()">基本用法</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        content: '通知框消息内容',
      });
    }

    return { showService };
  },
});
</script>

消息标题

通过title参数设置消息标题，默认为空，不显示标题。
<template>
  <d-button @click.native="showService()">消息标题</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
      });
    }

    return { showService };
  },
});
</script>

消息类型

通过type参数设置消息类型，目前支持normal、info、success、warning、danger五种类型，默认normal类型，不显示类型图标。
<template>
  <d-button @click.native="showService()">消息类型</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        type: 'success',
      });
    }

    return { showService };
  },
});
</script>

超时时间

通过duration参数设置超时时间，单位ms，默认3000 ms后自动关闭，设置为0则不会自动关闭。
<template>
  <d-button @click.native="showService()">超时时间</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        duration: 1000,
      });
    }

    return { showService };
  },
});
</script>

关闭回调

通过onClose参数设置消息关闭时的回调。
<template>
  <d-button @click.native="showService()">关闭回调</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        onClose: () => {
          console.log('notification closed');
        },
      });
    }

    return { showService };
  },
});
</script>

组件方式调用

除服务方式外，还提供组件方式调用，组件方式的默认插槽与服务方式的content参数作用一致，其他参数与服务方式保持同名。
<template>
  <d-button @click="showComponent">组件方式调用</d-button>
  <d-notification v-model="show" title="标题" type="info">通知提示内容</d-notification>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const show = ref(false);
    const showComponent = () => {
      show.value = true;
    };

    return { show, showComponent };
  },
});
</script>

Service 使用 

// 方式1，局部引入 NotificationService
import { NotificationService } from '@devui/vue-devui/notification';
NotificationService.open({ xxx });

// 方式2，全局属性
this.$notificationService.open({ xxx });

Notification 参数

参数名类型默认说明跳转
v-modelboolean'false'组件调用必选，控制是否显示组件方式调用
contentstring''可选，设置消息内容基本用法
titlestring''可选，设置消息标题消息标题
typeNotificationType'normal'可选，设置消息类型消息类型
durationnumber'3000'可选，设置超时时间超时时间
on-close() => void''可选，设置消息关闭时的回调关闭回调

Notification 插槽

插槽名说明
default默认插槽，组件方式使用时有效

类型定义

NotificationType 

type NotificationType = 'normal' | 'success' | 'error' | 'warning' | 'info';
Contributors
粤A2-20044005号