vueリアルタイムリスニングウィンドウ幅の変化

【適応】従来、フロントエンドエンジニアが解決しなければならない大きな問題であった--現在非常にホットなvueフレームワークとしても、抜け出すことはできない--elementui、ivewなどのオープンソースUIコンポーネントライブラリが次々と登場しているが、公式ライブラリはすべてのニーズを満たすことができないので、私たちは【リスニングウィンドウの変化】を通じて所望のほとんどの適応効果を達成することができる.

      ：document.body.clientWidth
      ：window.onresize

JSの方法を振り返ってみましょう

       ：document.body.clientWidth
       ：document.body.clientHeight
       ：document.body.offsetWidth (      )
       ：document.body.offsetHeight (      )

私たちはdocument.body.クライアントWidthはdataのカスタム変数に値を割り当てます.

data:{
    screenWidth: document.body.clientWidth
}

ページmountedでwindowをマウントします.onresizeメソッド:

mounted () {
    const that = this
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
}

screenWidth属性値の変化を監視し、screenWidthの変化値を印刷して観察します.

watch:{
    screenWidth(val){
        //         resize        ，     
        if(!this.timer){
            //       screenWidth   ，       data  screenWidth
            this.screenWidth = val
            this.timer = true
            let that = this
            setTimeout(function(){
                //   screenWidth    
                console.log(that.screenWidth)
                that.timer = false
            },400)
        }
    }
}

上記の方式では、0.4秒ごとに画面の幅を取得し、dataのscreenWideに幅値を割り当てることで、this.screenWideで直接取得することができる
よし!ウィンドウscreenWidth値の変化をモニタできる以上、この値に基づいて異なる適応スキームを設定することができます!