Win Design

Message 全局提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

代码演示

基础用法

Win-design 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

查看代码 < />

<template>
  <w-button @click="messageShow">打开消息提示</w-button>
  <w-button @click="VNodeShow">VNode</w-button>
</template>

<script>
  export default {
    methods: {
      messageShow () {
        this.$message('这是一条消息提示')
      },
      VNodeShow () {
        const h = this.$createElement
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', {style: 'color: teal'}, 'VNode')
          ])
        })
      }
    }
  }
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

查看代码 < />

<template>
  <section>
      <w-button v-for="item in messageList"
        :type="item.type"
        :key="item.type"
        @click="messageShow(item)">{{item.label}}</w-button>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        messageList: [
          {
            label: '消息',
            message: '这是一条消息提示',
            type: 'info'
          },
          {
            label: '成功',
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          },
          {
            label: '警告',
            message: '警告哦，这是一条警告消息',
            type: 'warning'
          },
          {
            label: '错误',
            message: '错了哦，这是一条错误消息',
            type: 'error'
          }
        ]
      }
    },
    methods: {
      messageShow (item) {
        this.$message({
          message: item.message,
          type: item.type
        })
      }
    }
  }
</script>

查看代码 < />

<template>
  <w-button @click="showLoading">显示加载中...</w-button>
</template>
<script>
  export default {
    name: 'MMessageLoading',
    methods: {
      showLoading() {
        this.$message({
          message: '显示加载中...',
          type: 'loading'
        });
      }
    }
  }
</script>

可关闭

可以添加关闭按钮。默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用 showClose 字段。此外，和 Notification 一样，Message 拥有可控的 duration，设置 0 为不会被自动关闭，默认为 3000 毫秒。

查看代码 < />

<template>
  <w-button v-for="item in messageList"
    :key="item.type" :type="item.type"
    @click="messageShow(item)">{{item.label}}</w-button>
</template>

<script>
  export default {
    data () {
      return {
        messageList: [
          {
            label: '消息',
            message: '这是一条消息提示',
            type: 'info'
          },
          {
            label: '成功',
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          },
          {
            label: '警告',
            message: '警告哦，这是一条警告消息',
            type: 'warning'
          },
          {
            label: '错误',
            message: '错了哦，这是一条错误消息',
            type: 'error'
          }
        ]
       }
      },
      methods: {
        messageShow (item) {
          this.$message({
            message: item.message,
            showClose: true,
            type: item.type
          })
        }
    }
  }
</script>

文字居中

使用 center 属性让文字水平居中。

查看代码 < />

<template>
  <w-button @click="messageShow">文字居中</w-button>
</template>

<script>
  export default {
    methods: {
      messageShow () {
        this.$message({
         message: 'Hi，我是居中的文字',
         center: true
        })
      }
    }
  }
</script>

WARNING

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

支持html片段

使用HTML片段

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

查看代码 < />

<template>
  <w-button @click="messageShow">使用Html片段</w-button>
</template>

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

全局方法

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

单独引入 Message ：



import { Message } from 'win-design';

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

API

Options

参数 说明 类型 可选值 默认值 Version
center 文字是否居中 Boolean — false
customClass 自定义类名 String — —
dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 Boolean — false
duration 显示时间, 毫秒。设为 0 则不会自动关闭 Number — 3000
iconClass 自定义图标的类名，会覆盖 type String — —
message 消息文字 String / VNode — —
onClose 关闭时的回调函数, 参数为被关闭的 message 实例 Function — —
offset Message 距离窗口顶部的偏移量 Number — 20
showClose 是否显示关闭按钮 Boolean — false
type 主题 String success/warning/info/error info

Methods

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

方法名 说明 Version
close 关闭当前的 Message

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/17/2020, 8:46:00 PM

← MessageBox 弹框 →