uniapp在自定义tabbar上动态修改svg图标颜色和字体颜色_Vue.js

需求：在uniapp项目内，自定义tabbar，需要将图标更换成svg格式，可动态修改图标及字体颜色。

效果图如下：

请添加图片描述

我使用的是uniapp结合uview2的组件使用，代码如下：

<u-tabbar :value="currentindex" @change="tabbarchange" :fixed="true" :activecolor="themecolor"
			:safeareainsetbottom="true" zindex='99'>
	<u-tabbar-item v-for="(item,index) in tabbarlist" :key="index" :text="item.text"
		:badge="item.isbadge?carnum:''">
		<!-- 选中的svg -->
		<view class="u-page__item__slot-icon tabbaritemicon"
			slot="active-icon" :style="{backgroundimage: 'url('+item.selectediconpath+')'}">
		</view>
		<!-- 未选中的svg -->
		<view class="u-page__item__slot-icon tabbaritemicon"
			slot="inactive-icon" :style="{backgroundimage: 'url('+item.iconpath+')'}">
		</view>
	</u-tabbar-item>
</u-tabbar>

对上述代码进行解析：

currentindex：是父组件传递过来的需要选中的下标
fixed：是否固定底部
themecolor：主题色
tabbarchange：切换tabbar的事件

数据来源：

// 将对应的svg导入进来
import {index,category,cart,mine} from "./svgurls.js"
export default {
	props: {
		// 当前索引
		currentindex: {
			type: number,
			default: 0
		},
	},
	data() {
		let that=this;
		return {
			// 主题色
			themecolor:"#0cea39",
			// tabbar数据
			tabbarlist: [{
					"pagepath": "/pages/index/index",
					"iconpath": '"' + index+ '"',
					"selectediconpath": that.changecolor('"' + index+ '"'),
					"text": "首页"
				},
				{
					"pagepath": "/pages/category/category",
					"iconpath": '"' + category + '"',
					"selectediconpath": that.changecolor('"' + category + '"'),
					"text": "分类"
				},
				{
					"pagepath": "/pages/cart/cart",
					"iconpath": '"' + cart + '"',
					"selectediconpath": that.changecolor('"' + cart + '"'),
					"text": "购物车"
				},
				{
					"pagepath": "/pages/mine/mine",
					"iconpath": '"' + mine+ '"',
					"selectediconpath": that.changecolor('"' + mine+ '"'),
					"text": "我的"
				}
			],
		}
	},
	methods:{
		// 改变svg的颜色
		changecolor(url) {
			let res = url.replace(/%23[a-za-z0-9]{6}/g, this.themecolor.replace("#", "%23"));
			return res;
		},
	}
}

各个图标的svg格式存放在svgurls.js文件内[可随意存放位置和更改名称]

// 这里代码偏多只展示index的，其他的自行填写
export const index="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 81 81'%3e%3cpath fill='%23909399' d='m13.19 44.83q-2.2.22-4.06-.69c-5.39-2.66-2.57-7.5.45-10.58 6.53-6.65 12.91-13.44 19.17-20.22q4.55-4.92 7.17-5.97c5.22-2.09 9.59.32 13.07 4.11q10.02 10.86 20.33 21.39c3.01 3.07 6.79 7.92 1.43 11.04q-2.12 1.23-4.76.86a.42.41 4.4 0 0-.47.4q-.17 8.72.02 18.34c.11 5.46-2.48 9.51-8.21 9.69q-9.35.29-33.94.12-9.43-.06-9.37-9.61.06-8.97.05-18.08 0-.88-.88-.8zm4.99-3.29q-.01 11.32-.01 23.46 0 3.3 3 4.01 1.53.36 3.7.35 16.19-.04 31.43-.09 5.01-.02 5-4.56-.05-11.31-.04-23.28 0-.62.62-.62c1.91 0 4.74.36 6.5-.26q1.79-.62.49-2-12.48-13.32-23.61-24.91-5.59-5.81-11.15.02-11.96 12.56-23.82 25.18a1.12 1.12 0 0 0 .79 1.89l6.49.18q.61.02.61.63z'/%3e%3cpath fill='%23909399' d='m40.23 41.22c6.2-5.65 13.84 3.37 7.01 8.95q-3.62 2.95-7.03 5.96-.47.41-.93.01-3.51-3.02-7.45-6.4c-6.15-5.26 1.24-14.1 7.44-8.52q.48.43.96 0z'/%3e%3c/svg%3e";

export const category ="";

export const cart ="";

export const mine="";