Vue 实时获取页面宽度 控制元素的显示和隐藏

</template>
  <div>
	<ECharts v-if="isShow"/>
  </div>
</template>

<script>
  ...
  export default {
    name: "index",
    components:{
      ...
      ECharts
    },
    data() {
      return {
        ...
        isShow: true,
        fullWidth: 0
      }
    },
    created(){
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy: function () {
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      handleResize (event) {
        this.fullWidth = document.documentElement.clientWidth;
        // 页面宽度小于750px时，不显示地图
        if (this.fullWidth < 750) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      }
    }
  }
</script>