28 lines
963 B
Vue
28 lines
963 B
Vue
<template>
|
|
<div class="aa-chartpanel" :class="{ 'is-collapsed': isCollapsed }">
|
|
<div class="aa-chartpanel-head">
|
|
<span class="aa-chartpanel-title">{{ title }}</span>
|
|
<div class="aa-chartpanel-tools">
|
|
<button class="aa-chartpanel-tool" @click="$emit('refresh')">刷新</button>
|
|
<button class="aa-chartpanel-tool" @click="$emit('export')">导出</button>
|
|
<button v-if="collapsible" class="aa-chartpanel-tool aa-chartpanel-caret" @click="isCollapsed = !isCollapsed">▾</button>
|
|
</div>
|
|
</div>
|
|
<div class="aa-chartpanel-body"><slot>图表区域</slot></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AaChartPanel',
|
|
props: {
|
|
title: { type: String, default: '图表' },
|
|
collapsible: { type: Boolean, default: true },
|
|
collapsed: { type: Boolean, default: false }
|
|
},
|
|
data: function () { return { isCollapsed: this.collapsed }; }
|
|
};
|
|
</script>
|
|
|
|
<style src="./ChartPanel.css"></style>
|