關(guān)于應(yīng)用UI組件的移動端適配方式
更新時間：2022年09月21日 09:11:50 作者：Serena_tz
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動端適配方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
在移動端開發(fā)應(yīng)用UI組件也會遇到一系列需要注意的問題。
問題1
比如說，標簽頁是一個整體的組件，但是我們需要將標簽頁的標題和其他組件一起固定到頂部就要將標簽頁標題分離出來，這時候我們可以自己寫一個樣式在將標題分離
具體的代碼：
// 組件
<van-sticky>
? ? ?<van-nav-bar title="列表" border></van-nav-bar>
? ? ?
? ? ?<div class="top">
? ? ? ? ?<div class="title" :class="{ active: active==0 }" @click="active=0">待審批</div>
? ? ? ? ?<div class="title" :class="{ active: active==1 }" @click="active=1">已審批</div>
? ? ?</div>
?</van-sticky>
?<to-do v-if="active==0"></to-do>
?<have-to-do v-if="active==1"></have-to-do>
// ?數(shù)據(jù)
?export default {
?? ? data() {
? ? ? ? return {
? ? ? ? ? ? active: 0,
? ? ? ? }
?? ?},
}主要原理就是使用一個數(shù)據(jù)，例如active進行標記。點擊不同的標題時，修改該數(shù)據(jù)標記的值，并且不同的標題在active標識激活后改變樣式，并且切換不同的面板。
問題2
同時，以vant組件為例，這類組件自身用的單位是px，但是用作移動端適配，我們應(yīng)該選擇rem，所以要進行一下轉(zhuǎn)換。
1.安裝lib-flexible
安裝命令
npm install lib-flexible --save
這個插件原理就是根據(jù)屏幕寬度的變化從而自動設(shè)置html根節(jié)點下的font-size大小。
2.在項目的入口引入lib-flexible
在main.js中添加：
import ‘lib-flexible'
3.安裝postcss-px2rem-exclude
安裝命令
npm install postcss-px2rem-exclude --save
這個插件在打包項目的時候?qū)x像素轉(zhuǎn)換為rem像素。
4.配置postcss.config.js
Vue3.0項目下默認沒有這個文件,我們可以自己手動新建一個postcss.config.js文件。并填入相應(yīng)的配置內(nèi)容，如下：
module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? 'postcss-px2rem-exclude': {
? ? //37.5是根據(jù)Vant組件的設(shè)計稿是375得來的,lib-flexible插件默認是將375分為10等分,如果UI組件的設(shè)計稿是750,那么這里的設(shè)置就是填750/10=75
? ? ? remUnit: 37.5,
? ? ? exclude: /folder_name/i
? ? }
? }
}接下來，啟動項目就可以看到組件已經(jīng)完成了移動端的適配。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件中props與data的結(jié)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue自定義組件如何添加使用原生事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue數(shù)據(jù)對象length屬性未定義問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
下面小編就為大家分享一篇Vue之Vue.set動態(tài)新增對象屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
vue動態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個動態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI2024-07-07
,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下
這篇文章主要介紹了vue中下載文件的方法,通過實例代碼講解了下載后端返回文件和下載本地文件，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-11-11
vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空
這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關(guān)于vue中自定義指令directive的相關(guān)資料,自定義指令解決的問題或者說使用場景是對普通 DOM 元素進行底層操作,所以我們不能盲目的胡亂的使用自定義指令,需要的朋友可以參考下2021-09-09