对于自建vue框架响应式布局
1. 首先在data(){ }中,定义一个浏览器当前宽度的变量,并初始化当前加载出来的浏览器的宽度,data(){return{screenWidth:document.body.clientWidth,}}然后用watch去监听screenWidth值的改变,watch:{screenWidth(val){this.screenWi...
·
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 } } },
更多推荐
已为社区贡献3条内容
所有评论(0)