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'

      }

    }

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容