快捷導(dǎo)航

vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法

更新時間：2021年03月02日 09:48:33 作者：我叫胡八一

這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

我們在進(jìn)行前端開發(fā)中必然會遇到PC與移動端的適配，面對這樣的問題有些公司會準(zhǔn)備兩個頁面，移動是移動，PC是PC，而響應(yīng)式布局就是根據(jù)用戶不同的機(jī)型展示不同的頁面，廢話不多說，直接貼代碼

首先我們這個功能是借助vuex實(shí)現(xiàn)的，沒下載的小伙伴可以先下一個

yarn add vuex

既然是響應(yīng)式布局就要準(zhǔn)備兩套css，一個是PC端的css，一個是移動端的css，我們暫且將PC端的樣式稱為computer，移動端的樣式稱為mobile

我們首先要做的就是當(dāng)前屏幕的寬度

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

這是vuex的state，我們后續(xù)還要實(shí)時監(jiān)控屏幕寬度，所以還需要提供一個改變screenWidth的方法，于是我又寫了一mutations

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

這樣我們的vuex的文件就寫好了，而后就是APP.vue,我們需要在這個文件下添加一個window.onresize事件實(shí)時更新vuex中的screenWidth值，在這里我們使用了輔助函數(shù)

import { mapState, mapMutations } from 'vuex'

在mounted鉤子函數(shù)中添加事件

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

這樣好比說我們網(wǎng)頁中的導(dǎo)航，移動端時我們需要它在底部，PC端時我們需要它在頂部，這樣我們就可以在nav.vue這個組件中用watch或computed監(jiān)聽screenWidth的值，這里我們用的是computed

<ul :class="computedPhone">//根據(jù)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就可以實(shí)現(xiàn)響應(yīng)式布局了

到此這篇關(guān)于vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法的文章就介紹到這了,更多相關(guān)vue-cli 響應(yīng)式布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: