data() {
return {
// 获取高度
fullHeight: window.innerHeight + 'px',
// 卡片样式
cardBodyStyle: {},
// 表格高度
tableHeight: null,
// 弹出框表格样式
userTableHeight: null,
}
},
computed: {
// 计算选项卡高度
tagsView: {
get() {
return this.$store.state.settings.tagsView
}
}
},
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
},
fullHeight(val) {
if (!this.timer) {
this.fullHeight = val
this.timer = true
this.initPage()
const that = this
setTimeout(function() {
that.timer = false
}, 400)
}
},
tagsView(val) {
this.initPage()
}
},
mounted() {
this.getBodyHeight()
this.initPage()
},
beforeMount() {
// 监听表格高度
window.addEventListener('resize', this.tableHeight)
},
methods: {
// 动态获取浏览器高度
getBodyHeight() {
const that = this
window.onresize = () => {
return (() => {
// window.fullHeight = document.documentElement.clientHeight
that.fullHeight = window.innerHeight
})()
}
},
// 初始化页面的高度
initPage() {
if (this.tagsView) {
this.cardBodyStyle = {
padding: '20px',
// height: window.innerHeight - 140 + 'px',
overflow: 'auto'
}
this.tableHeight = window.innerHeight - 325 + 'px'
} else {
this.cardBodyStyle = {
padding: '20px',
// height: window.innerHeight - 100 + 'px',
overflow: 'auto'
}
this.tableHeight = window.innerHeight - 285 + 'px'
}
// 已选用户表格高度
this.userTableHeight = window.innerHeight * 0.34 + 'px'
}
}
2020-04-22 vue 动态获取浏览器高度来对页面与tab栏进行布局
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一。用vue 获取动态元素的宽度。首页,要放在this.el挂载此元素,下面贴代码 <el-input auto-...
- 想实现的功能是,tabbleview的tableheaderview是webview,下面是评论,导航栏上有+-操...
- 直接上代码1、设置代理并创建 UIScrollView 2、创建控件 设置 frame,并添加到 _scrollV...