Message 全局提示
APP
PC
全局展示操作反馈信息。
规则
- 可提供成功、警告和错误等反馈信息。
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
引入方式
数字生活网页应用工程中，不需要 import，直接使用组件标签即可。
import { Message } from '@21cnfe/vui'
Vue.$Message = Vue.prototype.$Message = Message
|
代码演示
基本用法
普通提示，信息提醒反馈
<template>
<Button @click="showInfoMessage">info</Button>
</template>
<script>
export default {
methods: {
showInfoMessage () {
this.$Message.info({
content: '信息提示文本'
})
}
}
}
</script>
|
带有倾向性
带有 icon，常用来显示「成功、错误、警告、加载」类的系统消息
<template>
<Button @click="showSuccessMessage">success</Button>
<Button @click="showErrorMessage">error</Button>
<Button @click="showWarningMessage">warning</Button>
<Button @click="showLoadingMessage">loading</Button>
</template>
<script>
export default {
methods: {
showSuccessMessage () {
this.$Message.success({
content: '成功提示文本'
})
},
showErrorMessage () {
this.$Message.error({
content: '失败提示文本',
color: '#e94f4f'
})
},
showWarningMessage () {
this.$Message.warning({
content: '警告提示文本'
})
},
showLoadingMessage () {
this.$Message.loading({
content: '加载提示文本'
})
}
}
}
</script>
|
API
| 属性 |
说明 |
类型 |
默认值 |
content |
提示内容 |
String |
-- |
type |
提示类型，可选值[info,success,error,warning,loading]，必选 |
String |
info |
color |
提示内容文本颜色 |
String |
rgba(0, 0, 0, 0.65) |
duration |
自动关闭的延时，单位秒，配置为 null 则不自动关闭 |
Number |
1.5 |
onClose |
关闭后的执行函数 |
Function |
{} |
