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
<template>
<el-row type="flex">
<el-col :span="options.panel_span" class="detail-content" :class="options.panel_class" style="margin:0 auto">
<el-card class="box-card" :style="options.panel_style">
<div slot="header" class="clearfix" :class="options.title_class" @click="toggle()">
<slot name="title"></slot>
</div>
<div :style="options.content_height" :class="options.content_class" v-show="collapse">
<slot name="content"></slot>
<slot></slot>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'HmPanel',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
/**
* 在面板页传入面板对象
* 完整示例为：{ panel_class: '面板类名', title_class: '标题类名', content_class: '内容类名', panel_style: '面板样式',
* panel_span: '面板宽度比例', content_height: '内容高度', canCollapse: '是否可收起'}
*/
options: {
type: Object,
required: true
}
},
data() {
return {
collapse: true
}
},
computed: {
},
filters: {
},
created() {
},
methods: {
toggle() {
if (this.options.canCollapse) {
this.collapse = !this.collapse
console.log('收起展开')
} else {
console.log('不可收起')
}
}
}
}
</script>
<style scoped>
.weight{
font-weight: 700;
}
.center{
text-align: center;
}
</style>