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 用于梳理知识点