vuex实现宽高自适应

Posted 2023-03-23

参考技术A //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'