vue.js3:在css中使用變數([email protected])
阿新 • • 發佈：2022-02-19
一，js程式碼
1,css程式碼:定義變數<style> :root { --tabbar-background: red; } </style>2,html程式碼：呼叫變數 直接用var函式即可:
<tabBar id="tabbar" style="width:100%;font-size:0.20rem;background:var(--tabbar-background)"> <tabBarItem path="/home/home" activeColor="#CE1F6F"> <template3,js程式碼：修改變數:v-slot:item-icon=''> <img :src="tabList.one" alt /> </template> <template v-slot:item-icon-active=''> <img :src="tabList.one" alt /> </template> <template v-slot:item-text=''> <div>首頁</div> </template> </tabBarItem> <tabBarItem path="/goods/list" activeColor="#CE1F6F"> <template v-slot:item-icon=''> <img :src="tabList.two" alt /> </template> <template v-slot:item-icon-active=''><img :src="tabList.two" alt /> </template> <template v-slot:item-text=''> <div>分類</div> </template> </tabBarItem> <tabBarItem path="/cart/cart" activeColor="#CE1F6F"> <template v-slot:item-icon=''> <img :src="tabList.three" alt /> </template> <template v-slot:item-icon-active=''> <img :src="tabList.three" alt /> </template> <template v-slot:item-text=''> <div>購物車</div> </template> </tabBarItem> <tabBarItem path="/user/info" activeColor="#CE1F6F"> <template v-slot:item-icon=''> <img :src="tabList.four" alt /> </template> <template v-slot:item-icon-active=''> <img :src="tabList.four" alt /> </template> <template v-slot:item-text=''> <div>個人中心</div> </template> </tabBarItem> </tabBar>
//設定tabbar的背景顏色值: //document.body.style.setProperty('--tabbar-background', '#af2c36'); document.body.style.setProperty('--tabbar-background', res.data.setting.tabBarColor);
說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest
對應的原始碼可以訪問這裡獲取：https://github.com/liuhongdi/
或:https://gitee.com/liuhongdi
說明：作者:劉巨集締 郵箱: [email protected]
二，測試效果
1,未設定變數時的預設背景色:red 2,設定變數後，背景色會改變為指定顏色:三，檢視vue.js的版本:
liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue storeweb@0.1.0 /data/vue/storeweb ├─┬ @vue/cli-plugin-babel@4.5.13 │ └─┬ @vue/babel-preset-app@4.5.13 │ └── vue@3.2.6 deduped ├─┬ element-plus@1.1.0-beta.7 │ └── vue@3.2.6 deduped ├─┬ vue-router@4.0.11 │ └── vue@3.2.6 deduped ├── vue@3.2.6 └─┬ vue3-carousel@0.1.27 └── vue@3.2.6 deduped