vue图片宽高自适应_vuex实现宽高自适应

//app.vue里设置，宽度通过栅格控制，高度通过vuex获取高度

export default {

name: 'App',

data() {

return {

window: {

width: document.body.clientWidth,

height: document.body.clientHeight

}

}

},

methods: {

initWindow() {

this.$store.dispatch('setWindow', this.window)

window.onresize = () => {

return (() => {

this.window.width = document.body.clientWidth

this.window.height = document.body.clientHeight

this.$store.dispatch('setWindow', this.window)

})()

}

}

},

created() {

this.initWindow()

}

}

页面用法：

computed: {

...mapGetters({

mainHeight: 'getMainHeight'

}),

chartStyle1() {

const height = this.mainHeight * 0.24 - 6

return {

color: '#fff',

width: '100%',

height: height + 'px'

}

}

}