//app.vue里設(shè)置,寬度通過柵格控制赃蛛,高度通過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'
? ? ? }
? ? }
? }