u-tabs徽标改颜色并随着鼠标点击而改色

在这里插入图片描述
在uview官网中没找到改色的api,然后就查看源码,发现通过修改源码能实现上图效果,本次组件用的uview 2x版本
修改文件u-tabs文件,然后把依赖文件带过来,如图下:
在这里插入图片描述
然后修改my_tabs.vue文件(即原u-tabs)中修改clickHandler方法如下

	// 点击某一个标签
			clickHandler(item, index) {
				item.badge.type = ""
				this.list.forEach((item2, index2) => {
					if (index2 == index) {
						item2.badge.bgColor = "#3297FF"
					} else {
						item2.badge.bgColor = "grey"
					}
				})
				console.log(item, '测试')
				// 因为标签可能为disabled状态,所以click是一定会发出的,但是change事件是需要可用的状态才发出
				this.$emit('click', {
					...item,
					index
				})
				// 如果disabled状态,返回
				if (item.disabled) return
				this.innerCurrent = index
				this.resize()
				this.$emit('change', {
					...item,
					index
				})
			},
			

在到原来的list中的数组修改成如下数据

list1: [{
					name: '全部',
					badge: {
						value: 0,
						bgColor: '#3297FF'
					}
				}, {
					name: '药品',
					badge: {
						value: 0,
						bgColor: 'grey'
					}
				}, {
					name: '化妆品',
					badge: {
						value: 0,
						bgColor: 'grey'
					}
				}, {
					name: '医疗器械',
					badge: {
						value: 0,
						bgColor: 'grey'
					}
				}],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/528635.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一站式解读多模态——Transformer、Embedding、主流模型与通用任务实战(下)

本文章由飞桨星河社区开发者高宏伟贡献。高宏伟,飞桨开发者技术专家(PPDE),飞桨领航团团长,长期在自媒体领域分享AI技术知识,博客粉丝9w,飞桨星河社区ID为GoAI 。分享分为上下两期,本…

Windows下的ASLR保护机制详解及其绕过

写在前面: 本篇博客为本人原创,但非首发,首发在先知社区 原文链接: https://xz.aliyun.com/t/13924?time__1311mqmxnQ0%3DqGwx2DBqDTlpzeG%3DKT8qQTID&alichlgrefhttps%3A%2F%2Fxz.aliyun.com%2Fu%2F74789各位师傅有兴趣的…

设计模式总结-抽象工厂模式

抽象工厂模式 模式动机模式定义模式结构模式分析模式实例与解析实例一:电器工厂 模式动机 在工厂方法模式中具体工厂负责生产具体的产品,每一个具体工厂对应一种具体产品,工厂方法也具有唯一性,一般情况下,一个具体工…

4.8QT

将按钮3,基于qt4版本连接实现点击按钮3,实现关闭窗口。 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), btn3(new QPushButton(this)) {ui->s…

D1084 5A低压差电压调整器应用方案,内含电流限制和热保护功能,防止任何过载时产生过高的结温。

1、 概述: D1084是一款具有5A输出能力、低压差为1.5V的三端稳压器。输出电压可通过电位器调节或1.5V, 1.8V, 3.3V三个固定电压版。内含电流限制和热保护功能,防止任何过载时产生过高的结温。D1084系列电路有标准TO-220、TO-263和TO-252封装形式。 2、 典…

代码随想录训练营day32

第八章 贪心算法 part02 1.LeetCode. 买卖股票的最佳时机II 1.1题目链接:122.买卖股票的最佳时机 II 文章讲解:代码随想录 视频讲解:B站卡哥视频 1.2思路:本题首先要清楚两点:只有一只股票!当前只有买股…

02_物联网感知技术

物联网感知技术 物联网感知技术 物联网感知技术

网络安全(防火墙,IDS,IPS概述)

问题一:什么是防火墙,IDS,IPS? 防火墙是对IP:port的访问进行限制,对访问端口进行制定的策略去允许开放的访问,将不放开的端口进行拒绝访问,从而达到充当防DDOS的设备。主要是拒绝网络流量,阻断所有不希望出现的流程,禁止数据流量流通,达到安全防护的作用。如将一些恶…

漫谈GIS和空间数据库技术

1 GIS和CAD有啥区别 地理信息系统(GIS)和计算机辅助设计(CAD)是两种不同的技术,它们在功能、应用和数据处理方面有着显著的区别。以下是根据搜索结果得出的GIS和CAD的主要区别: 1. **数据处理的侧重点不同…

Redis-底层数据结构

Redis-底层数据结构 redisObject对象机制对象共享引用计数以及对象的消毁 动态字符串SDS链表链表的优缺点: 压缩链表ziplist的缺点 字典-Dictrehash渐进式rehash 整数集-intSet内存分布图整数集合的升级 跳表 - ZSkipList快表-quicklistlistpack redisObject对象机制 typedef s…

【神经网络】生成对抗网络GAN

生成对抗网络GAN 欢迎访问Blog总目录! 文章目录 生成对抗网络GAN1.学习链接2.GAN结构2.1.生成模型Generator2.2.判别模型Discrimintor2.3.伪代码 3.优缺点3.1.优势3.2.缺点 4.pytorch GAN4.1.API4.2.GAN的搭建4.2.1.结果4.2.2.代码 4.3.示意图:star: 1.学习链接 …

浅析安全传输协议HTTPS之“S”

当前互联网,在各大浏览器厂商和CA厂商的推动下,掀起了一股HTTPS应用浪潮。为了让大家更好的了解HTTPS,本文给大家介绍关于HTTPS 中的S一个整体的认识。从其产生的历史背景、设计目标说起,到分析其协议设计结构、交互流程是如何实现…

kernel32.dll文件丢失的几种相应解决办法,成功解决丢失难题

当启动计算机并尝试运行某个应用程序时,屏幕上突然弹出一条醒目的错误提示:“电脑显示kernel32.dll丢失”。这也就意味着操作系统在当前环境下无法找到名为“kernel32.dll”的动态链接库文件。这个问题可能会导致一些应用程序无法正常运行,给…

【鸿蒙开发】系统组件Text,Span

Text组件 Text显示一段文本 接口: Text(content?: string | Resource) 参数: 参数名 参数类型 必填 参数描述 content string | Resource 否 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不…

模型优化和调整(2)

接模型优化和调整(1) 调整反向传播 梯度消失和梯度爆炸 梯度消失和梯度爆炸都和计算出来的“delta”有关。理想的delta应该是逐渐减小的。如果delta一直太小,则会导致下降太慢,甚至对于权重没有改变,此时形成了梯度…

远程桌面无法连接怎么办?

远程桌面无法连接是指在尝试使用远程桌面功能时出现连接失败的情况。这种问题可能会给工作和生活带来极大的不便,因此我们需要寻找解决办法。在讨论解决方案之前,我们先来了解一下【天联】组网的优势。 【天联】组网的优势有很多。它能够解决复杂网络环境…

我自己开发的App上架了

我自己开发的App上架了 1、梦想实现 前几天,我在华为应用市场上架了我自己开发的App,心情十分激动。自从毕业后进入职场,在Android岗位上干了5年,一直想要开发一款App,为什么会有这种想法?一是能够按照自…

尝试在手机上运行google 最新开源的gpt模型 gemma

Gemma介绍 Gemma简介 Gemma是谷歌于2024年2月21日发布的一系列轻量级、最先进的开放语言模型,使用了与创建Gemini模型相同的研究和技术。由Google DeepMind和Google其他团队共同开发。 Gemma提供两种尺寸的模型权重:2B和7B。每种尺寸都带有经过预训练&a…

大话设计模式——18.策略模式(Strategy Pattern)

简介 是一系列算法的封装,即做的事情相同(方法名称相同)但是实现的方式不同,以相同方式调用所有的算法,减少算法与使用算法的耦合。直接调用方法。 UML图 应用场景 Java AWT中的LayoutManager(布局管理器&…

蓝桥杯简单模板

目录 最大公约数 两个数的最大公约数 多个数的最大公约数 最小公倍数 两个数的最小公倍数 多个数的最小公倍数 素数 ​编辑 位数分离 正写 ​编辑 反写 闰年 最大公约数 两个数的最大公约数 之前看见的是辗转相除法,例如现在让算一个49,21…