You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
923 B
39 lines
923 B
<template>
|
|
<el-row type="flex" justify="space-between">
|
|
<el-col v-show="!expanded" :span="extraSpan">
|
|
<slot name="extra"/>
|
|
</el-col>
|
|
<div style="display: flex;justify-content: center;align-items: center">
|
|
<el-link :icon="iconClass" :underline="false" style="font-size: 16px" @click="expanded = !expanded"/>
|
|
</div>
|
|
<el-col :span="defaultSpan">
|
|
<slot/>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ExtraArea",
|
|
|
|
props: {
|
|
extra: {type: Number, default: 5}
|
|
},
|
|
|
|
data: () => ({expanded: false}),
|
|
|
|
computed: {
|
|
extraSpan() {
|
|
return this.expanded ? 0 : this.extra
|
|
},
|
|
defaultSpan() {
|
|
return 23 - this.extraSpan
|
|
},
|
|
iconClass() {
|
|
return `el-icon-arrow-${this.expanded ? 'right' : 'left'}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|