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

我们在进行前端开发中必然会遇到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响应式添加、修改数组和对象的值
• 浅谈Vue的响应式原理
• 使用Vue.set()方法实现响应式修改数组数据步骤
• Vue的事件响应式进度条组件实例详解
• Vue如何实现响应式系统
• Vue3.0 响应式系统源码逐行分析讲解
• Vue响应式原理详解
• 利用JS响应式修改vue实现页面的input值
• 浅谈Vue 数据响应式原理

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！