CalmHarbin

# Operation 按钮

按钮组件。

# 基础用法

使用 title 属性来定义 自定义标题。

<template>
    <div>
        <operation :operationOptions="operationOptions"></operation>
    </div>
</template>

<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { OperationOptionType } from 'calm-harbin/types/operation'

@Component
export default class BiuFormBr extends Vue {
    form: any = {}

    loading = false

    disabled = false

    get operationOptions(): OperationOptionType[] {
        return [
            {
                title: '添加',
                callback: () => {
                    alert('添加')
                }
            },
            {
                title: '导出',
                type: 'success',
                loading: this.loading,
                callback: () => {
                    this.loading = true
                    setTimeout(() => {
                        alert('导出成功')
                        this.loading = false
                    }, 2000)
                }
            },
            {
                title: '隐藏按钮',
                hidden: true // 可以通过配置hidden来隐藏按钮,用来控制用户权限
            },
            {
                title: '点我禁用',
                message: '你点我了，现在处理禁用状态',
                disabled: this.disabled,
                callback: () => {
                    this.disabled = !this.disabled
                }
            },
            {
                title: '搜索',
                btnProps: {
                    icon: 'el-icon-search',
                    plain: false
                }
            },
            {
                render: () => {
                    return (
                        <span
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginLeft: '10px'
                            }}
                        >
                            自定义渲染
                        </span>
                    )
                }
            }
        ]
    }
}
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
显示代码

# 属性

参数 说明 必填 类型 默认值
operationOptions 按钮配置 OperationOptionType[] —
loading 所有按钮是否处于 loading 状态 boolean false

← 属性 →