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.
69 lines
1.8 KiB
69 lines
1.8 KiB
<template>
|
|
<div class="auto-hidden">
|
|
<div ref="content" v-html="html" class="auto-hidden__content" :style="contentStyle"/>
|
|
<div v-if="showCollapse" class="auto-hidden__collapse">
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
:icon="collapseIcon"
|
|
@click="handleCollapse"
|
|
>
|
|
{{collapse ? '展开' : '收起'}}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getElementHeight} from "@/utils/browser"
|
|
|
|
export default {
|
|
name: "AutoHidden",
|
|
props: {
|
|
html: String,
|
|
height: {type: String, default: '100px'}
|
|
},
|
|
data() {
|
|
return {
|
|
showCollapse: false,
|
|
collapse: true
|
|
}
|
|
},
|
|
computed: {
|
|
contentStyle() {
|
|
if (!this.showCollapse || !this.collapse) return {}
|
|
return {'max-height': this.height}
|
|
},
|
|
collapseIcon() {
|
|
return this.collapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
|
|
}
|
|
},
|
|
methods: {
|
|
handleCollapse() {
|
|
this.collapse = !this.collapse
|
|
},
|
|
isOverHeight() {
|
|
const height = getElementHeight(this.$refs['content'])
|
|
return height > parseFloat(this.height)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.showCollapse = this.isOverHeight()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.auto-hidden {
|
|
position: relative;
|
|
|
|
&__content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__collapse {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
|