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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
如何优化vue打包文件过大
Apr 13 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的类树(支持无限分类)
2006/10/09 PHP
php中文字符截取防乱码
2008/03/28 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Mac 上切换Python多版本
2017/06/17 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python实现图像全景拼接
2020/03/27 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
高二历史教学反思
2014/01/25 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年统计工作总结
2014/11/21 职场文书
python在package下继续嵌套一个package
2022/04/14 Python