0
点赞
收藏
分享

微信扫一扫

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>

  

---------------------------------------------
生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。
↑面的话,越看越不痛快,应该这么说:

生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!

新博客 ​​​https://www.VuejsDev.com​​ 用于梳理知识点



举报

相关推荐

0 条评论