对于自建vue框架响应式布局

1. 首先在data(){ }中，定义一个浏览器当前宽度的变量，并初始化当前加载出来的浏览器的宽度，

data(){

return{

screenWidth:document.body.clientWidth,

}

}

然后用watch去监听screenWidth值的改变，

watch:{
    screenWidth(val){
        this.screenWidth = val
        let self = this
        if (this.screenWidth<=767) {
             self.peen = false
            self.seen = true
        }else{
           self.peen = true
            self.seen = false
        }
    }
}

那请问值怎么改变呢？当然是用mounted去实时监测浏览器宽度的变换去改变screenWidth的值

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

然后就是在html代码中用v-show去控制true  or  false

methods:{
    ResponsiveMenu () {
       if(this.showitem===false){
           this.showitem=true
       }else if(this.showitem===true){
           this.showitem=false
       }
    }
},