# Notice 通知提醒

# Notice 概述

在界面右上角显示可关闭的全局通知，常用于以下场景：

通知内容带有描述信息
系统主动推送

# Notice 代码示例

# 基础用法

基本用法，配置 duration 自动关闭的延时，默认在 4.5 秒后关闭，不关闭可以写 0。如果 desc 参数为空或不填，则自动应用仅标题模式下的样式。
建议标题言简意赅，例如"删除成功"，更详细的内容可以放在描述信息里。

<template>
  <div>
    <h-button type="primary" @click="open(false)">打开提醒</h-button>
    <h-button @click="open(true)">打开提醒（仅标题）</h-button>
  </div>
</template>
<script>
export default {
  methods: {
    open(nodesc) {
      this.$hNotice.open({
        title: "这是通知标题",
        desc: nodesc
          ? ""
          : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
  },
};
</script>

复制代码

# 提醒类型

带有状态图标的提醒。

info 带提醒状态图标的通知消息
success 带成功状态图标的通知消息
warring 带警告状态图标的通知消息
error 带错误状态图标的通知消息

带描述信息

仅标题

关闭所有提醒

<template>
  <div>
    <p>带描述信息</p>
    <h-button @click="info(false)" type="primary">消息</h-button>
    <h-button @click="success(false)" type="success">成功</h-button>
    <h-button @click="warning(false)" type="warning">警告</h-button>
    <h-button @click="error(false)" type="error">错误</h-button>
    <p>仅标题</p>
    <h-button @click="info(true)" type="primary">消息</h-button>
    <h-button @click="success(true)" type="success">成功</h-button>
    <h-button @click="warning(true)" type="warning">警告</h-button>
    <h-button @click="error(true)" type="error">错误</h-button>
    <p>关闭所有提醒</p>
    <h-button @click="destroy">关闭所有提醒</h-button>
  </div>
</template>
<script>
export default {
  methods: {
    info(nodesc) {
      this.$hNotice.info({
        title: "这是通知标题",
        desc: nodesc
          ? ""
          : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
    success(nodesc) {
      this.$hNotice.success({
        title: "这是通知标题",
        desc: nodesc
          ? ""
          : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
    warning(nodesc) {
      this.$hNotice.warning({
        title: "这是通知标题",
        desc: nodesc
          ? ""
          : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
    error(nodesc) {
      this.$hNotice.error({
        title: "这是通知标题",
        desc: nodesc
          ? ""
          : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
    destroy() {
      this.$hNotice.destroy();
    },
  },
};
</script>

复制代码

# 自定义时长

自定义时长，为 0 则不自动关闭，关闭时触发 onclose 事件。也可以在 Notice.config() 中全局配置，详见API。

<template>
  <div>
    <h-button type="primary" @click="time">打开提醒</h-button>
  </div>
</template>
<script>
export default {
  methods: {
    time() {
      this.$hNotice.open({
        title: "这是通知标题",
        desc: "这条通知不会自动关闭，需要点击关闭按钮才可以关闭。",
        duration: 0,
      });
    },
  },
};
</script>

复制代码

# 自定义显示位置(需初始化页面后点击才能看到效果)

在 Notice.config() 中通过 top 参数全局配置通知组件距离顶端的距离，不配置默认为 24px。 duration 参数全局配置通知消息自动关闭的时间，默认4.5s，配置为0时不自动关闭。
配置 onclose 触发通知关闭事件
配置 name 作为通知的唯一标示，全局方法 close(name) 关闭某个通知

<template>
  <div>
    <h-button type="primary" @click="top">打开提醒</h-button>
    <h-button @click="close">关闭特定的提醒</h-button>
  </div>
</template>
<script>
export default {
  methods: {
    top() {
      this.$hNotice.config({
        top: 200,
        duration: 0,
      });
      this.$hNotice.open({
        title: "离top200像素的位置",
        desc:
          "自定义通知消息的显示位置，top设置为200。不会自动关闭，需要点击关闭按钮才可以关闭。",
        name: "testone",
        onclose: this.closeFn,
      });
    },
    closeFn() {
      alert("通知消息关闭事件");
    },
    close() {
      this.$hNotice.close("testone");
    },
  },
};
</script>

复制代码

# 自定义通知提醒

配置 render 属性自定义通知提醒。

<template>
  <div>
    <h-button type="primary" @click="custom">自定义通知提醒</h-button>
  </div>
</template>
<script>
export default {
  methods: {
    clickHandler1() {
      this.$hNotice.close("custom");
      this.$hMessage.info({ content: "已读" });
    },
    clickHandler2() {
      this.$hNotice.close("custom");
      this.$hMessage.info({ content: "消息已删除" });
    },
    custom() {
      let self = this;
      this.$hNotice.open({
        name: "custom",
        duration: 5,
        render(h) {
          return h(
            "div",
            {
              style: {
                display: "flex",
                "flex-flow": "row wrap",
              },
            },
            [
              h(
                "p",
                {
                  style: {
                    width: "100%",
                    lineHeight: "30px",
                  },
                },
                ["通知标题"]
              ),
              h(
                "p",
                {
                  style: {
                    width: "100%",
                    fontSize: "13px",
                    lineHeight: "15px",
                    color: "#999",
                    marginBottom: "15px",
                  },
                },
                [
                  "通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述" +
                    Math.random(),
                ]
              ),
              h(
                "h-button",
                {
                  attrs: {
                    type: "primary",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: self.clickHandler1,
                  },
                },
                ["已读"]
              ),
              h(
                "h-button",
                {
                  on: {
                    click: self.clickHandler2,
                  },
                },
                ["删除"]
              ),
            ]
          );
        },
      });
    },
  },
};
</script>

复制代码

# placement、top、bottom

用于设置notice提示信息弹出的位置

注意：每点一个按钮，需要刷新

normal

placement="top-right"

placement="bottom-right"

<template>
  <div>
    <p>注意：每点一个按钮，需要刷新</p>
    <p>normal</p>
    <h-button type="primary" @click="open('top')">top</h-button>
    <h-button type="primary" @click="open('bottom')">bottom</h-button>
    <p>placement="top-right"</p>
    <h-button type="primary" @click="open('top', 'top-right')">top</h-button>
    <h-button type="primary" @click="open('bottom', 'top-right')">bottom</h-button>
    <p>placement="bottom-right"</p>
    <h-button type="primary" @click="open('top', 'bottom-right')">top</h-button>
    <h-button type="primary" @click="open('bottom', 'bottom-right')">bottom</h-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    open(type, placement) {
      this.count++;
      let style = {
        [type]: 100,
      }
      if(placement) style = Object.assign(style, {
        placement: placement
      })
      this.$hNotice.config(style);
      this.$hNotice.open({
        title: "这是通知标题",
        duration: 300,
        desc: `count：${this.count}`
      });
    },
  },
};
</script>

复制代码

# 动态设置$hNotice.config()

<template>
  <div>
    <h-button type="primary" @click="open1(false)">1. 打开提醒</h-button>
    <h-button @click="open">2. open msgBox</h-button>
    <h-msg-box
      v-model="isShow"
      title="普通的MsgBox对话框标题"
      width="700"
      closeDrop
      :dropdown="{ trigger: ['close', 'drag'], show: true }"
    >
    <h-button type="primary" @click="open2(false)">打开提醒</h-button>
    </h-msg-box>
  </div>
</template>
<script>
export default {
  data() {
    return {
      transfer: true,
      isShow: false,
      model1: "",
    };
  },
  methods: {
    open() {
      this.$hNotice.config({
        zIndex: 800,
        duration: 2,
        placement: 'bottom-right',
        bottom: 100,

      }, true);
      this.isShow = true;
    },
    open1(nodesc) {
      this.$hNotice.config({
        zIndex: 1060,
        placement: 'top-right', 
        top: 100,
      });
      this.$hNotice.open({
        title: "这是通知标题",
        desc: nodesc ? "" : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
        duration: 10,
      });
    },
    open2(nodesc) {
      this.$hNotice.config({
        zIndex: 800,
      });
      this.$hNotice.open({
        title: "这是通知标题",
        desc: nodesc ? "" : "这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述",
      });
    },
  },
};
</script>

复制代码

# Notice API

# Notice instance

通过直接调用以下方法来使用组件：

this.$hNotice.open(config)
this.$hNotice.info(config)
this.$hNotice.success(config)
this.$hNotice.warning(config)
this.$hNotice.error(config)

以上方法隐式地创建及维护 Vue 组件。参数 config 为对象，具体说明如下：

属性	说明	类型	默认值
title	通知提醒的标题	String	-
desc	通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式	String	-
duration	自动关闭的延时，单位秒，不关闭可以写 0	Number	4.5
name	当前通知的唯一标识	String	自动
onClose	关闭时的回调	Function	-
render	自定义通知提醒。返回一个 VNode 对象。函数第一个入参是 createElement 函数。配置以后 title 和 desc 将不起作用。(v1.0.44)	Function	-

另外提供了全局配置、全局关闭某个通知和全局销毁的方法：

this.$hNotice.config(options)
this.$hNotice.close(name)
this.$hNotice.destroy()

# $hNotice.config

重要说明

this.$hNotice.config(options)从v1.12.0版本开支持动态设置配置项，（之前只支持初始化的时候配置）
由于支持动态配置，this.$hNotice.config(options, immediate)方法，新增immediate参数，表示动态设置config在调用当前函数时是否就生效。默认：false v1.12.0
immediate: false（默认），表示动态设置config在调用当前函数时不立即生效，只有在再次创建notice弹窗信息时，才会生效
immediate: true，表示动态设置config在调用当前函数时立即生效
options中的duration属性，针对动态设置options配置，只有在新弹出的notice弹窗信息时有效，在动态设置之前弹出的notice弹框，针对该属性不会生效

this.$hNotice.config({
    top: 50,
    placement: 'top-right', // (默认值)
    duration: 3,
    zIndex: 800,
});

this.$hNotice.config({
    bottom: 50,
    placement: 'bottom-right',
    duration: 3,
    zIndex: 800,
});

# options参数说明

属性	说明	类型	默认值
placement	用于设置notice提示信息弹出的位置	String	top-right
bottom	通知组件距离底端的距离，单位像素注意：placement: 'bottom-right', 有效	Number	24
top	通知组件距离顶端的距离，单位像素注意：placement: 'top-right', 有效	Number	24
duration	默认自动关闭的延时，单位秒注意：针对动态设置options配置，只有在新弹出的notice弹窗信息时有效，在动态设置之前弹出的notice弹框，针对该属性不会生效	Number	4.5
zIndex	设置notice组件的层级z-index`v1.12.0`	Number	-