vue-cli中实现响应式布局的方法


Posted in Vue.js onMarch 02, 2021

我们在进行前端开发中必然会遇到PC与移动端的适配,面对这样的问题有些公司会准备两个页面,移动是移动,PC是PC,而响应式布局就是根据用户不同的机型展示不同的页面,废话不多说,直接贴代码

首先我们这个功能是借助vuex实现的,没下载的小伙伴可以先下一个

yarn add vuex

既然是响应式布局就要准备两套css,一个是PC端的css,一个是移动端的css,我们暂且将PC端的样式称为computer,移动端的样式称为mobile

我们首先要做的就是当前屏幕的宽度

state: {
  screenWidth: document.documentElement.clientWidth,
  screenHeight: document.documentElement.clientHeight
 }

这是vuex的state,我们后续还要实时监控屏幕宽度,所以还需要提供一个改变screenWidth的方法,于是我又写了一mutations

mutations: {
  setWidth (state, value) {
   state.screenWidth = value
  },
  setHeight (state, value) {
   state.screenHeight = value
  }
 }

这样我们的vuex的文件就写好了,而后就是APP.vue,我们需要在这个文件下添加一个window.onresize事件实时更新vuex中的screenWidth值,在这里我们使用了辅助函数

import { mapState, mapMutations } from 'vuex'

在mounted钩子函数中添加事件

mounted () {
  window.onresize = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

这样好比说我们网页中的导航,移动端时我们需要它在底部,PC端时我们需要它在顶部,这样我们就可以在nav.vue这个组件中用watch或computed监听screenWidth的值,这里我们用的是computed

<ul :class="computedPhone">//根据screenWidth提供不同的class名
   <router-link to='/file' tag="li" active-class="active">电影</router-link>
   <router-link to='/cinma' tag="li" active-class="active">影院</router-link>
   <router-link to='/center' tag="li" active-class="active">个人中心</router-link>
</ul>
computed: {
  ...mapState('stylesheet', ['screenWidth']),
  computedPhone () {
   if (this.screenWidth < 1024) {
    return 'mobile'
   } else {
    return 'computer'
   }
  }
 }

这样只要写好两套css就可以实现响应式布局了

到此这篇关于vue-cli中实现响应式布局的方法的文章就介绍到这了,更多相关vue-cli 响应式布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
You might like
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
什么是方法的重载
2013/06/24 面试题
毕业生求职推荐信
2013/11/04 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
学生会招新策划书
2014/02/14 职场文书
优质服务演讲稿
2014/05/14 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
企业宣传策划方案
2014/05/29 职场文书
小学生节水倡议书
2015/04/29 职场文书
风之谷观后感
2015/06/11 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis