message 通知组件 Beta

使用示例

默认

带有倾向性

带有按钮组

全局

<template>
  <div class="notification-demo">
    <div>
      <p>默认</p>
      <el-button :plain="true" @click="open1">通知消息1</el-button>
      <el-button :plain="true" @click="open2">标题超长</el-button>
      <el-button :plain="true" @click="open3">内容超长</el-button>
      <el-button :plain="true" @click="open4">内容标题都超长</el-button>
      <p>带有倾向性</p>
      <el-button plain @click="open5">成功</el-button>
      <el-button plain @click="open6">警告</el-button>
      <el-button plain @click="open7">消息</el-button>
      <el-button plain @click="open8">错误</el-button>
      <p>带有按钮组</p>
      <el-button plain @click="open9">默认点击【取消】、【确认】都是关闭</el-button>
      <el-button plain @click="open10">点击【取消】回调</el-button>
      <el-button plain @click="open11">点击【确认】回调</el-button>
      <p>全局</p>
      <el-button plain @click="open12">字符串错误</el-button>
      <el-button plain @click="open13">关闭全部</el-button>
      <el-button plain @click="open14">字符串成功</el-button>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'notification',
    methods: {
      open1() {
        this.$notify({
          title: '标题1',
          message: '左上角弹出的消息1',
          duration: 1000,
        });
      },
      open2() {
        this.$notify({
          title: '标题标题标题标题标题标题标题标题标题标题',
          message: '左上角弹出的消息1',
          duration: 1000,
        });
      },
      open3() {
        this.$notify({
          title: '内容超长',
          message:
            '内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长',
          duration: 1000,
        });
      },
      open4() {
        this.$notify({
          title:
            '内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长',
          message:
            '内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长',
          duration: 1000,
        });
      },
      open5() {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success',
          duration: 0,
        });
      },

      open6() {
        this.$notify({
          title: '警告',
          message: '这是一条警告的提示消息',
          type: 'warning',
          duration: 0,
        });
      },

      open7() {
        this.$notify({
          title: '消息',
          message: '这是一条消息的提示消息',
          type: 'info',
          duration: 0,
        });
      },

      open8() {
        this.$notify({
          title: '错误',
          message: '这是一条错误的提示消息',
          type: 'error',
          duration: 0,
        });
      },
      open9() {
        this.$notify({
          title: '带有按钮组的提示',
          message: '左上角弹出的消息1',
          duration: 0,
          showBtnGroup: true,
        });
      },
      open10() {
        this.$notify({
          title: '带有按钮组的提示',
          message: '左上角弹出的消息1',
          duration: 0,
          showBtnGroup: true,
          onCancel: done => {
            console.log('done::', done);
            console.log('cancel 回调!');
            done();
          },
        });
      },
      open11() {
        this.$notify({
          title: '带有按钮组的提示',
          message:
            '内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长内容标题都超长',
          duration: 0,
          showBtnGroup: true,
          onSuccess: done => {
            console.log('done::', done);
            console.log('success 回调!');
            done();
          },
        });
      },
      open12() {
        this.$notify.error('error message,error message,error message,error message,');
      },
      open13() {
        this.$notify.closeAll();
      },
      open14() {
        this.$notify.success('success message,success message,success message,success message,');
      },
    },
  };
</script>

<style scoped></style>

显示代码 复制代码 复制代码

Options

参数	必填	说明	类型	可选值	默认值
title	否	标题	string	—	—
message	否	说明文字	string/Vue.VNode	—	—
dangerouslyUseHTMLString	否	是否将 message 属性作为 HTML 片段处理	boolean	—	false
type	否	主题样式，如果不在可选值内将被忽略	string	success/warning/info/error	—
iconClass	否	自定义图标的类名。若设置了 type，则 iconClass 会被覆盖	string	—	—
duration	否	显示时间, 毫秒。设为 0 则不会自动关闭	number	—	4500
showClose	否	是否显示关闭按钮	boolean	—	true
onClose	否	关闭时的回调函数	function	—	—
onCancel	否	点击【取消】时的回调函数	function	—	—
onSuccess	否	点击【关闭】时的回调函数	function	—	—
onClick	否	点击 Notification 时的回调函数	function	—	—
offset	否	偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量	number	—	0

方法

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明
close	关闭当前的 Notification

全局方法

YKC UI 为 Vue.prototype 添加了全局方法 $notify。 因此在 vue instance 中可以采用本页面中的方式调用 Notification。

单独引用

单独引入 Notification：

import YkcNotification from '@ykc/ykc-ui/packages/notification';

此时调用方法为 YkcNotification(options)。 我们也为每个 type 定义了各自的方法，如 YkcNotification.success(options)。 并且可以调用 YkcNotification.closeAll() 手动关闭所有实例。

使用 HTML 片段

message 属性支持传入 HTML 片段

将 dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。

<template>
  <el-button
    plain
    @click="open">
    使用 HTML 片段
  </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'HTML 片段',
          dangerouslyUseHTMLString: true,
          message: '<strong>这是 <i>HTML</i> 片段</strong>'
        });
      }
    }
  }
</script>

显示代码 复制代码 复制代码

!> message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。