138. Message 消息提示 #
常用于主动操作后的反馈提示。
按需引入方式 #
如果是完整引入可跳过此步骤
javascript
import Vue from 'vue'
import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/message.css'
Vue.use(Message)
基础使用 #
vue
<template>
<el-button :plain="true" @click="open">打开消息提示</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message('这是一条消息提示')
}
}
}
</script>
不同状态 #
用来显示「成功、警告、消息、错误」类的操作反馈。
vue
<template>
<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>
</template>
<script>
export default {
methods: {
open1() {
this.$message({ message: '恭喜你,这是一条成功消息', type: 'success' })
},
open2() {
this.$message({ message: '警告哦,这是一条警告消息', type: 'warning' })
},
open3() {
this.$message('这是一条消息提示')
},
open4() {
this.$message.error('错了哦,这是一条错误消息')
}
}
}
</script>
Options #
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 消息文字 | string | |
type | 消息状态 | string | info |
... |