# Action Toolbar 操作工具条
操作工具条一般用在表单上方，或指定的功能段落上方。它可以提供定义标题、定义操作按钮等功能。
# 如何引入
import actionToolbar from '@/components/action-toolbar'
export default {
name: '',
components: {
actionToolbar
},
...
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用示例
你可以直接复制使用此处代码
<template>
<action-toolbar :actions="actions">
<!-- 使用 left 插槽，插入字号为 1.6rem 的标题 -->
<template #left>
<span class="f16">表具详述</span>
</template>
</action-toolbar>
</template>
<script>
export default {
data () {
return {
actions: [{
label: '保存',
type: 'primary',
onClick: this.formSave
}, {
label: '清空',
onClick: this.clearForm
}]
}
}
}
</script>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 属性
| 属性名称 | 属性说明 | 默认值 |
|---|---|---|
| actions | [Array] 按钮列表，按钮详细配置参考 按钮配置 | [] |
# 按钮配置
| 属性名称 | 属性说明 | 默认值 |
|---|---|---|
| label | [String] 按钮文本 | 无 |
| type | [String] 按钮风格类型 primary/success/warning/danger/info/text | 无 |
| plain | [Boolean] 是否朴素按钮 | false |
| round | [Boolean] 是否圆角按钮 | false |
| circle | [Boolean] 是否圆形按钮 | false |
| disabled | [Boolean] 是否禁用状态 | false |
| icon | [String] 图标类名 将为按钮增加一个图表，参考文档图标按钮 (opens new window) | 无 |
| autofocus | [Boolean] 是否默认聚焦 | false |
| className | [String] 自定义按钮样式名 | 无 |
| onClick | [function] 点击事件函数 | 无 |
| group | [String] 按钮组组名 同样分组名称的多个按钮将被归为一组，参考文档按钮组 (opens new window) | 无 |
| dropdown | [Array] 将按钮配置为 el-dropdown (opens new window) 组件，参考 Dropdown 配置 | 无 |
| onCommand | [function] 当配置为 el-dropdown (opens new window) 组件时，该事件响应下拉菜单项目点击操作 | 无 |
| placement | [String] 当配置为 el-dropdown (opens new window) 组件时，菜单弹出位置 可选值：top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | [String] 当配置为 el-dropdown (opens new window) 组件时，触发菜单下拉的行为 可选值：hover/click | hover |
| hideOnClick | [Boolean] 当配置为 el-dropdown (opens new window) 组件时，是否在点击菜单项后隐藏菜单 | true |
# dropdown
配置示例
{
label: '导出',
className: 'ml10',
onCommand: value => {
if (value === 0) {
// 导出配置文件
this.exportPreset()
}
},
dropdown: [
{
label: '配置文件',
value: 0
},
{
label: 'JSON',
value: 1,
// 显示分割线
divided: true
},
{
label: 'Excel',
value: 2
},
{
label: 'CVS',
value: 3,
// 禁用
disabled: true
}
]
}
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
31
32
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
31
32
# 插槽
| 插槽名称 | 插槽说明 | 默认内容 |
|---|---|---|
| default | 默认插槽 启用该插槽，将替换默认的按钮列表展示 当开发者想完全自定义工具条右侧呈现内容时很有用 | 按钮列表 |
| action-left | 按钮列表左侧插槽 | 无 |
| action-right | 按钮列表右侧插槽 | 无 |
| left | 工具条左侧插槽 | 无 |