vue-cli 中實作回應式布局
我們在進行前端開發中必然會遇到PC與移動端的適配，面對這樣的問題有些公司會準備兩個頁面，移動是移動，PC是PC，而回應式布局就是根據用戶不同的機型展示不同的頁面，廢話不多說，直接貼代碼，對前端感興趣的小伙伴可以加我QQ：1627889159
首先我們這個功能是借助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就可以實作回應式布局了，如果小伙伴對前端感興趣可以加我QQ：1627889159
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260074.html
標籤：其他