Win Design

Notification 通知

代码演示

基本用法

通知类消息。

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="20">
        <w-col :span="6">
          <w-button @click="handleNotifyClose">可自动关闭</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify">不可自动关闭</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotifyClose() {
      /**
       *@Description 可自动关闭
       */
      this.$notify({
        title: '预约通知',
        message: '这是一条会自动关闭的预约通知消息',
      });
    },
    handleNotify() {
      /**
       *@Description 不可自动关闭
       */
      this.$notify({
        title: '一分钟快速自诊',
        iconClass: 'w-icon-search',
        customClass: 'edit-notification',
        dangerouslyUseHTMLString: true,
        message: '不知道挂哪个科？<span style="color: #0F49ED;padding: 0 2px;cursor: pointer;">快速前往<i class="w-icon-arrow-right"></i></span>',
        duration: 0
      });
    }
  }
}
</script>
<style lang="scss">
.w-notification.edit-notification {
  .w-notification__icon.w-icon-search {
    color: #1469EE;
  }
}
</style>

不同位置

可以让 Notification 从屏幕四角中的任意一角弹出

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="0">
        <w-col :span="6">
          <w-button @click="handleNotify('top-left')">左上角</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('bottom-left')">左下角</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('top-right')">右上角</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('bottom-right')">右下角</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotify(position) {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success',
        position,
      });
    },
  }
}
</script>

状态

带有icon，常用来显示「成功、警告、消息、错误」类的系统消息

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="0">
        <w-col :span="6">
          <w-button @click="handleNotify('success', '成功')">成功</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('warning', '警告')">警告</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('error', '错误')">错误</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotify('info', '消息')">消息</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotify(type, title) {
      this.$notify({
        title,
        message: '这是一条成功的提示消息',
        type,
      });
    },
  }
}
</script>

偏移

偏移一些位置

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="20">
        <w-col :span="6">
          <w-button @click="handleNotify">偏移</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotify() {
      this.$notify({
        title: '偏移',
        message: '这是一条带有偏移的提示消息',
        offset: 100
      });
    }
  }
}
</script>

回调函数

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="20">
        <w-col :span="6">
          <w-button @click="handleNotifyClose">关闭回调函数</w-button>
        </w-col>
        <w-col :span="6">
          <w-button @click="handleNotifyClick">点击 Notification 时的回调函数</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotifyClose() {
      this.$notify({
        title: '预约通知',
        message: '这是一条预约通知消息',
        onClose: () => {
          console.log('关闭 Notification');
        }
      });
    },
    handleNotifyClick() {
      this.$notify({
        title: '预约通知',
        message: '这是一条预约通知消息',
        onClick: () => {
          console.log('点击 Notification');
        }
      });
    }
  }
}
</script>

HTML 片段

message属性支持传入 HTML 片段

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="20">
        <w-col :span="6">
          <w-button @click="handleNotify">使用 HTML 片段</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotify() {
      this.$notify({
        title: '预约通知',
        dangerouslyUseHTMLString: true,
        message: '收到一条<span style="color: #0F49ED;padding: 0 2px;">预约</span>消息，请及时点击<span style="color: #0F49ED;padding: 0 2px;cursor: pointer;">查看</span>',
      });
    }
  }
}
</script>

隐藏关闭按钮

设置隐藏关闭按钮

查看代码 < />

<template>
  <section class="notification-demo">
      <w-row :gutter="20">
        <w-col :span="6">
          <w-button @click="handleNotify">隐藏关闭按钮</w-button>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    handleNotify() {
      this.$notify.success({
        title: '预约成功',
        dangerouslyUseHTMLString: true,
        message: '恭喜您，预约成功！',
        showClose: false,
      });
    }
  }
}
</script>

全局方法

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

单独引用

单独引入 Notification：

import { Notification } from 'win-design';

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

Options

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

方法

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

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

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 6/10/2020, 2:12:08 PM

← Popconfirm 气泡确认框 →