标签：vue 变量 deduped tabbar js3 3.2 com

一，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://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

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 

 

   

标签：vue,变量,deduped,tabbar,js3,3.2,com
来源： https://www.cnblogs.com/architectforest/p/15911860.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。