vue.js3:在css中使用變量(vue@3.2.6)

一，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">
          <template 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>

 

3,js代碼：修改變量:

          //設置tabbar的背景顏色值:
          //document.body.style.setProperty('--tabbar-background', '#af2c36');
          document.body.style.setProperty('--tabbar-background', res.data.setting.tabBarColor);

說明：劉宏締的架構森林是一個專注架構的博客，

網站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-zai-css-zhong-shi-yong-bian-liang-vue-3-2-6/

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，測試效果

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