030_Message消息提示

1. Message消息提示

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

1.2. Options

1.3. 方法

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

1.5. 单独引入Message

import { Message } from 'element-ui';

Message(options);
Message.success(options);

1.6. 可以调用Message.closeAll()手动关闭所有实例。

1.7. 如果完整引入了Element, 那么Vue.prototype上会有一个全局方法$message, 它的调用方式为: this.$message(options), 同样会返回一个Message实例。

2. Message消息提示例子

2.1. 使用脚手架新建一个名为element-ui-message的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Message from '../components/Message.vue'
import TypeMessage from '../components/TypeMessage.vue'
import CloseMessage from '../components/CloseMessage.vue'
import CenterMessage from '../components/CenterMessage.vue'
import HtmlMessage from '../components/HtmlMessage.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Message' },
  { path: '/Message', component: Message },
  { path: '/TypeMessage', component: TypeMessage },
  { path: '/CloseMessage', component: CloseMessage },
  { path: '/CenterMessage', component: CenterMessage },
  { path: '/HtmlMessage', component: HtmlMessage }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Message.vue

<template>
  <div>
    <h1>基础用法-从顶部出现, 3秒后自动消失</h1>
    <h4>Element注册了一个$message方法用于调用, Message可以接收一个字符串或一个VNode作为参数, 它会被显示为正文内容。</h4>
    <el-button :plain="true" @click="open">打开消息提示</el-button>
    <el-button :plain="true" @click="openVn">VNode</el-button>
  </div>
</template>

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

2.4. 在components下创建TypeMessage.vue

<template>
  <div>
    <h1>不同状态-用来显示「成功、警告、消息、错误」类的操作反馈</h1>
    <h4>当需要自定义更多属性时, Message也可以接收一个对象为参数。比如: 设置type字段可以定义不同的状态, 默认为info。此时正文内容以message的值传入。同时, 我们也为Message的各种type注册了方法, 可以在不传入type字段的情况直接按类型调用。</h4>
    <el-row>
      <el-button :plain="true" @click="open11">成功1</el-button>
      <el-button :plain="true" @click="open12">警告1</el-button>
      <el-button :plain="true" @click="open13">消息1</el-button>
      <el-button :plain="true" @click="open14">错误1</el-button>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-button :plain="true" @click="open21">成功2</el-button>
      <el-button :plain="true" @click="open22">警告2</el-button>
      <el-button :plain="true" @click="open23">消息2</el-button>
      <el-button :plain="true" @click="open24">错误2</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    open11 () {
      this.$message({
        message: '恭喜你, 这是一条成功消息1',
        type: 'success'
      })
    },
    open12 () {
      this.$message({
        message: '警告哦, 这是一条警告消息1',
        type: 'warning'
      })
    },
    open13 () {
      this.$message('这是一条消息提示1')
    },
    open14 () {
      this.$message({
        message: '错了哦, 这是一条错误消息1',
        type: 'error'
      })
    },
    open21 () {
      this.$message.success('恭喜你, 这是一条成功消息2')
    },
    open22 () {
      this.$message.warning('警告哦, 这是一条警告消息2')
    },
    open23 () {
      this.$message.info('这是一条消息提示2')
    },
    open24 () {
      this.$message.error('错了哦, 这是一条错误消息2')
    }
  }
}
</script>

2.5. 在components下创建CloseMessage.vue

<template>
  <div>
    <h1>可关闭-可以添加关闭按钮</h1>
    <h4>默认的Message是不可以被人工关闭的, 如果需要可手动关闭的Message, 可以使用showClose字段。此外, 和Notification一样, Message拥有可控的duration, 设置0为不会被自动关闭, 默认为3000毫秒。</h4>
    <el-button :plain="true" @click="open1">消息</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>
  </div>
</template>

<script>
export default {
  methods: {
    open1 () {
      this.$message({
        duration: 0,
        showClose: true,
        message: '这是一条消息提示',
        onClose: function (ins) {
          console.log(ins)
        }
      })
    },
    open2 () {
      this.$message({
        showClose: true,
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    },
    open3 () {
      this.$message({
        showClose: true,
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      })
    },
    open4 () {
      this.$message({
        showClose: true,
        message: '错了哦，这是一条错误消息',
        type: 'error'
      })
    }
  }
}
</script>

2.6. 在components下创建CenterMessage.vue

<template>
  <div>
    <h1>文字居中</h1>
    <h4>使用center属性让文字水平居中。iconClass自定义图标的类名, 会覆盖type。offset设置Message距离窗口顶部的偏移量。</h4>
    <el-button :plain="true" @click="openCenter">文字居中</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    openCenter () {
      this.$message({
        message: '居中的文字',
        center: true,
        iconClass: 'el-icon-message',
        offset: 120
      })
    }
  }
}
</script>

2.7. 在components下创建HtmlMessage.vue

<template>
  <div>
    <h1>使用html片段</h1>
    <h4>将dangerouslyUseHTMLString属性设置为true, message就会被当作html片段处理。</h4>
    <el-button :plain="true" @click="openHtml">使用html片段</el-button>
  </div>
</template>

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

2.8. 运行项目, 访问http://localhost:8080/#/Message

2.9. 运行项目, 访问http://localhost:8080/#/TypeMessage 

2.10. 运行项目, 访问http://localhost:8080/#/CloseMessage

 2.11. 运行项目, 访问http://localhost:8080/#/CenterMessage  

2.12. 运行项目, 访问http://localhost:8080/#/HtmlMessage