正文
autoHeight.vue 高度自适应
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
autoHeight.vue 高度自适应
<!--
* @description 自适应高度
* @fileName autoHeight.vue
* @author 彭成刚
* @date 2019/03/11 09:45:38
* @version V1.0.0
<autoHeight v-model="s1Height"
:allHeight='0'
:precent='20'
:diffHeight='0'>
<table-s1 :height="s1Height"></table-s1>
</autoHeight>
!-->
<template>
<div :style='styleHeight'>
<slot></slot>
</div>
</template> <script>
export default {
data () {
return {
allHeightData: 0,
styleHeight: ''
}
},
props: {
value: {
type: Number,
default: 0
},
noStyle: {
type: Boolean,
default: false
},
allHeight: {
type: Number,
default: 0
},
precent: {
type: Number,
default: 100
},
diffHeight: {
type: Number,
default: 0
}
}, components: {}, computed: {}, mounted () {
this.calcHeight()
window.addEventListener('resize', () => {
this.calcHeight()
})
// window.innerHeight
},
watch: {
'allHeight' (to, from) {
this.calcHeight()
},
'$route' (to, from) {
this.calcHeight()
}
},
methods: {
calcHeight () {
let retHeight
if (this.allHeight === 0) {
this.allHeightData = window.innerHeight
} else {
this.allHeightData = this.allHeight
} retHeight = (this.allHeightData * this.precent / 100) - this.diffHeight
this.$emit('input', retHeight) if (!this.noStyle) {
this.styleHeight = 'height: ' + retHeight + 'px; overflow-y:auto;'
}
} }
} </script>
<style lang='less' scoped>
</style>
