鍍金池/ 問(wèn)答/HTML/ 前端vue代碼縮減問(wèn)題

前端vue代碼縮減問(wèn)題

項(xiàng)目使用webpack + vue構(gòu)建的

由于本人js不是太好，還請(qǐng)各位大神多多指教如何縮減下面這段代碼

或者有別的好辦法寫(xiě)出來(lái)也行

圖片描述

init() {
      if (window.innerWidth <= 1400) {
        document.getElementById('w').style.width = (window.innerWidth - 367) + 'px';
        document.getElementById('l').style.display = 'none';
      } else {
        document.getElementById('l').style.display = 'block';
        document.getElementById('w').style.width = (window.innerWidth - 717) + 'px';
      }
    }
回答
編輯回答
網(wǎng)妓

代碼不要用圖片貼出來(lái)!!

let w = window.innerWidth;
    document.getElementById('w').style.width = w - (w<=1440?367:717) + 'px'

;
    document.getElementById('l').style.display = w<=1440?'none':'block';
2017年7月28日 13:38
編輯回答
抱緊我

像這種屏幕寬度判斷的，業(yè)務(wù)關(guān)系不大，應(yīng)該后續(xù)還會(huì)用到。
建議將屏幕尺寸做個(gè)區(qū)分lg, md, sm等
既然用了vue，獲取dom可以用ref

<template>
    <div>
        <div id="w" ref="w"></div>
        <div id="l" ref="l"></div>
    </div>
</template>

mounted() {this.init()},
init() {
    let l = this.$refs.l
    let w = this.$refs.w
    const isLg = getScreenSizeEnum() === 'lg'
    l.style.display = isLg ? 'none': 'block'
    w.style.width = window.innerWidth - (isLg ? 367 : 717) + 'px'
}

function getScreenSizeEnum() {
    const innerWidth = window.innerWidth
    if (innerWidth >= 1400) {
        return 'lg'
    }else {
        //todo: xxxx
    }
}
2018年3月15日 18:28