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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 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
第二节 对象模型 [2]
2006/10/09 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Vue.use源码分析
2017/04/22 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
pandas数据集的端到端处理
2019/02/18 Python
python仿抖音表白神器
2019/04/08 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers