天天看點

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>
           
vue