mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
120 lines
4.4 KiB
Markdown
120 lines
4.4 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Message 提示
|
||
|
||
## 概述
|
||
重量级的信息反馈组件，在屏幕中间显示，显示少量内容，给予提示，需要用户确认。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/message/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-button @click="click1">显示内容</Wb-button>
|
||
<Wb-button @click="click2">显示标题和内容</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>基础用法，默认有确认和取消两个按钮</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="自定义配置" template="ui/templates/message/2.html">
|
||
<template v-slot:demo>
|
||
<Wb-button @click="click5">可配置的Message</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>传入配置对象，可以配置标题、内容、按钮文字</p>
|
||
<p>标题和内容支持传入html</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="Message类型" template="ui/templates/message/3.html">
|
||
<template v-slot:demo>
|
||
<Wb-button @click="click3">alert模式</Wb-button>
|
||
<Wb-button @click="click4">confirm模式</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>alert模式只有确认按钮，confirm模式有确认和取消按钮。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
methods: {
|
||
click1 () {
|
||
this.$Message("我是提示").then(function (index) {
|
||
console.log(index)
|
||
})
|
||
},
|
||
click2 () {
|
||
this.$Message("标题", "我是提示").then(function (index) {
|
||
console.log(index)
|
||
})
|
||
},
|
||
click3 () {
|
||
this.$Message.alert("标题", "我是提示").then(function (index) {
|
||
console.log(index)
|
||
})
|
||
},
|
||
click4 () {
|
||
this.$Message.confirm("标题", "我是提示").then(function (index) {
|
||
console.log(index)
|
||
})
|
||
},
|
||
click5 () {
|
||
this.$Message({
|
||
title: '标题', //可以传入文本和domString
|
||
template: '我是模版', //可以传入文本和domString
|
||
buttons: [{ //最多有两个, 第一条配置第一个button
|
||
text: '确定',
|
||
class: "xx"
|
||
},{ //配置第二个button
|
||
text: "放弃",
|
||
class: "yy"
|
||
}]
|
||
}).then(function (index) {
|
||
console.log(index)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
提供了静态方法，在Vue实例里面调用以下方法来使用组件
|
||
```js
|
||
this.$Message(title, template)
|
||
this.$Message(option)
|
||
this.$Message.success(title, template)
|
||
this.$Message.success(option)
|
||
this.$Message.error(title, template)
|
||
this.$Message.error(option)
|
||
this.$Message.warn(title, template)
|
||
this.$Message.warn(option)
|
||
```
|
||
函数执行的返回值是promise，当点击按钮时触发resolve，参数是按钮的index
|
||
```js
|
||
this.$Message.confirm("标题", "我是提示").then(function (index) {
|
||
console.log(index)
|
||
})
|
||
```
|
||
|
||
### Options
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| title | 标题，内容可以是字符串和包含Dom结构的字符串 | String | null |
|
||
| template | 提示内容，内容可以是字符串和包含Dom结构的字符串 | String | null |
|
||
| buttons | 配置按钮的数据，最多两个，多余的不显示 | Array | [] |
|
||
| buttons.text | 按钮文字 | String | null |
|
||
| buttons.show | 按钮是否显示 | Boolean | true |
|
||
| buttons.class | 按钮的样式 | String | null |
|