Appearance
MessageBar-DEMO
Default
Error
Blocked
Correct
Warning
vue
Default
<fv-MessageBar>
</fv-MessageBar>
Error
<fv-MessageBar status="error">
</fv-MessageBar>
Blocked
<fv-MessageBar status="blocked">
</fv-MessageBar>
Correct
<fv-MessageBar status="correct">
</fv-MessageBar>
Warning
<fv-MessageBar status="warning">
</fv-MessageBar>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
MessageBar-Dark Theme
Default
Error
Blocked
Correct
Warning
MessageBar-Toast
- Standard
vue
<fv-button style="width: 200px;" @click="show1">Show MessageBar</fv-button>1
javascript
this.$barWarning('This is a toast message.', {
status: 'correct'
});1
2
3
2
3
- Customize Message Template
vue
<fv-button style="width: 200px;" @click="show2">Show MessageBar</fv-button>1
javascript
this.$barWarning(h('div', [
h('span', { class: 'header' }, 'Message'),
'This is a toast message.',
h('a', 'Visit our website.')
]), {
status: 'correct'
});1
2
3
4
5
6
7
2
3
4
5
6
7
- Customize Control Template
vue
<fv-button style="width: 200px;" @click="show3">Show MessageBar</fv-button>1
javascript
this.$barWarning(h('div', [
h('span', { class: 'header' }, 'Message'),
'This is a toast message.',
h('a', 'Visit our website.')
]), {
status: 'correct',
showControl: true,
autoClose: -1,
control: x => {
return h('div', {
style: {
display: "flex",
alignItems: "center"
}
}, [
h(resolveComponent('fv-button'), {
onClick: () => {
alert('Yes');
x.cancel();
},
}, 'Yes'),
h(resolveComponent('fv-button'), {
onClick: () => {
alert('No');
x.cancel();
},
style: 'margin-left: 5px;' }, 'No')
]);
}
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
SwiftWarning
Swift Warning
vue
<p id="example">Swift Warning</p>
<fv-button style="width: 200px;" @click="showSwiftWarning">Click to Show SwiftWarning</fv-button>1
2
3
2
3
javascript
this.$swiftWarning(document.getElementById('example'), {
color: "rgba(173, 38, 45, 1)",
replaceTitle: "You clicked Swift Warning."
});1
2
3
4
2
3
4
Propoties
| 属性(attr) | 类型(type) | 必填(required) | 默认值(default) | 说明(statement) |
|---|---|---|---|---|
| status | ['default','warning','correct','blocked','error'] | No | default | 显示状态, 一共有5种 |
| showControl | Boolean | No | false | 是否显示控制按钮 |
| showClose | Boolean | No | true | 是否显示关闭按钮 |
| mode | ['relative','fixed'] | No | relative | 显示模式relative下位相对定位, fixed下为悬浮固定定位 |
| autoClose | Number | No | 3000 | MessageBar自动关闭时间, 单位为ms, 设为-1时永远不自动消失 |
Events
| 事件名(Name) | 参数类型(args) | 说明(statement) |
|---|---|---|
| close | 关闭MessageBar时触发事件 |
Slot
- Msg
- 默认为正常标题
class="header"加粗标题<a></a>链接
vue
<template v-slot:msg>
<span>Normal content <span class="header">Header content</span><a>Link</a></span>
</template>1
2
3
2
3
- Control
- cancel: 取消函数
- theme: 当前主题
vue
<template v-slot:control="x">
<fv-button @click="x.cancel()">Yes</fv-button>
</template>1
2
3
2
3
Toast
javascript
this.$barWarning(msg, options = {
status: 'default',
showControl: false,
showClose: true,
control: null,
mode: 'fixed',
autoClose: 3000
});
control_panel: x => h() // 传入具名插槽属性参数的函数, 函数返回值为$createElement函数1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
javascript
this.$swiftWarning(element, options = {
color: "rgba(173, 38, 45, 1)",
replaceTitle: "Swift Warning"
});1
2
3
4
2
3
4