vue3+ts+vant选择器选中文字效果

所需要的样式: 选中某个选项后文字有放大和改变颜色的效果在这里插入图片描述

主要就是在van-picker上加class, 给对应的style样式即可

<van-picker
			class="custom-picker"
			:title="pickerData.titleText"
			v-if="pickerData.ispicker"
			show-toolbar
			:columns="columns"
			@confirm="onConfirm"
			@cancel="pickerData.showPicker = false" />
	const pickerData = ref({
		showPicker: false,
		ispicker: true,
		currentDate: dayjs().format("YYYY-MM-DD").split("-"),
		selectKey: "", //保存选择的key
		titleText: ""
	});
	//日期选择器 选中文字
	/* 只针对带有 'custom-picker' 类名的Picker修改选中文本样式 */
	::v-deep.custom-picker .van-picker__column--selected {
		color: #f00;
		font-size: 18px;
	}
	::v-deep.custom-picker .van-picker__frame {
		color: #f00;
		font-size: 18px;
	}
	::v-deep.custom-picker .van-picker-column__item--selected {
		color: #000;
		font-size: 18px;
	}
	::v-deep.van-doc-demo-block__card,
	::v-deep.van-popup.van-popup--bottom {
		border-radius: 8px 8px 0 0;
	}

	::v-deep.date-picker .van-picker-column__item--selected {
		color: #000;
		font-size: 18px;
	}

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

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

相关文章

【Java orm 框架比较】九 新增wood框架对比

【Java orm 框架比较】九 新增wood框架对比 本次新增wood 框架测试 测试数据存储、分页查询&#xff0c;文档及框架比较稳定半天时间加入测试使用 迁移到&#xff08;https://gitee.com/wujiawei1207537021/spring-orm-integration-compare&#xff09; orm框架使用性能比较…

Python中的`return`语句详解

Python中的return语句详解 对于初学Python或任何编程语言的人来说&#xff0c;理解函数如何返回值是非常重要的。在Python中&#xff0c;return语句用于从函数中返回结果。本篇博客将详细介绍return语句的基本用法&#xff0c;以及如何在不同情境中有效使用它。 什么是return…

我独自升级崛起怎么刷初始装备等级属性 我独自升级崛起攻略分享

我独自升级崛起怎么刷初始装备等级属性 我独自升级崛起攻略分享 我独自升级崛起是由同名漫画改编的RPG游戏&#xff0c;支持PC和移动两端。讲述了世界中出现了次元传送门&#xff0c;觉醒的猎人在其中和次元传送门传送来的怪物进行对抗&#xff0c;保护人类的安全。在游戏中玩…

探索数字社交的奇迹:解读Facebook的革命性影响

1. 社交互动的全新模式 Facebook的出现不仅仅是一个社交媒体平台的诞生&#xff0c;更是一种全新的社交互动模式的开启。传统的社交模式主要依赖于面对面的交流&#xff0c;而Facebook则将社交推向了全新的数字化平台&#xff0c;使得人们可以在虚拟的世界里建立和维系社交关系…

AI绘画Stable Diffusion 插件篇:智能标签提示词插件sd-danbooru-tags-upsampler

大家好&#xff0c;我是向阳。 关于智能标签提示词插件&#xff0c;在很早之前就介绍过很多款了&#xff0c;今天再给大家介绍一款智能标签提示词插件sd-danbooru-tags-upsampler。该智能提示词插件是今年2月23号才发布的第一版V0.1.0&#xff0c;算是比较新的智能提示词插件。…

Java 区块链应用 | 割韭菜之假如K线涨跌可随意变动修改的实现

大家好&#xff0c;我是程序员大猩猩。 我一直在想&#xff0c;币圈这个行情时涨时跌&#xff0c;不断的割韭菜&#xff0c;不是由市场决定的&#xff01;而是由交易所直接输入一个数值后点击确定按钮而变化的&#xff0c;那么是不是很恐怖的行为。 为了验证这么一个想法&…

快速掌握子网划分(简单易懂)

什么是子网划分&#xff1f; 子网划分 是指将一个大的IP网络划分为更小、更易于管理的子网络&#xff0c;由大化小&#xff0c;是子网划分的核心理念。 子网划分的基本概念 IP地址&#xff1a;一个32位的数值&#xff0c;表示为四个十进制数&#xff08;每个数在0-255之间&a…

20240509给飞凌的RK3588开发板在linux系统下挂载TF卡

20240509给飞凌的RK3588开发板在linux系统下挂载TF卡 2024/5/9 9:56 飞凌的开发板。linux/Buildroot 上电之前 TF卡插槽装入了32GB的TF卡。FAT32格式。 fdisk可以看到 TF卡。但是mount的时候 busy。请问是啥问题&#xff1f; 为了在核心板 播放MP4视频。 现在要将视频 弄到 核…

懒洋洋作业讲解

懒洋洋作业讲解 环境配置 1.软件下载&#xff1a;DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架 2.软件介绍 HBuilder是由DCloud&#xff08;数字天堂&#xff09;推出的一款面向HTML5的Web开发…

从零开始写 Docker(十三)---实现 mydocker rm 删除容器

本文为从零开始写 Docker 系列第十三篇&#xff0c;实现类似 docker rm 的功能&#xff0c;使得我们能够删除容器。 完整代码见&#xff1a;https://github.com/lixd/mydocker 欢迎 Star 推荐阅读以下文章对 docker 基本实现有一个大致认识&#xff1a; 核心原理&#xff1a;深…

【Linux系统编程】第十五弹---调试器gdb使用

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、背景 2、安装gdb 3、gdb的使用 总结 1、背景 前面我们学习了文件编辑器&#xff0c;项目自动化构建工具&#xff0c;以及g…

一年期SSL证书选择指南

在当今这个数字化时代&#xff0c;网络安全已成为每个人和企业都必须关注的重要议题。SSL证书作为保障网络安全的重要工具&#xff0c;对于保护用户隐私、提高网站信任度以及促进在线交易安全具有重要意义。本文将为您详细解析如何选择一年期的SSL证书&#xff0c;以确保您的网…

Linux系统入侵排查(一)

前言 为什么要做系统入侵排查 入侵排查思路 1.检查账号安全 基本使用&#xff1a; cat和more指令说明 1、查看用户信息文件 2、影子文件 3.查看当前登录用户 2.账号安全入侵排查方法总结 1、查询特权用户特权用户(uid 为0) 2、查询可以远程登录的帐号信息 3、除roo…

第二证券|摘星脱帽行情火爆 超40只ST股候场

5月8日&#xff0c;ST中嘉、*ST明诚强势涨停&#xff0c;2家公司年内均请求吊销危险警示。其间ST中嘉自4月29日以来&#xff0c;已接连录得5个涨停板&#xff1b;*ST明诚自4月23日以来9个交易日录得8个涨停板。 年报季向来是几家欢喜几家愁的时间&#xff0c;有公司披星戴帽&a…

Konga域名配置多个路由

云原生API网关-Kong部署与konga基本使用 Nginx server{listen 443 ssl;location / {proxy_pass http://127.0.0.1:8100;}location /openApi {proxy_pass http://172.31.233.35:7100/openApi;} } Kong {"id": "f880b21c-f7e0-43d7-a2a9-221fe86d9231&q…

【 npm详解:从入门到精通】

文章目录 npm详解&#xff1a;从入门到精通1. [npm](https://www.npmjs.com/)的安装2. npm的基础用法2.1 初始化项目2.2 安装依赖2.3 卸载依赖2.4 更新依赖 3. npm的高级用法3.1 运行脚本3.2 使用npm scope3.3 使用npm link 4. npm资源5. 使用npm进行依赖树分析和可视化6. npm进…

c语言常用操作符(2)

1.移位操作符 移位操作符分为<<左移操作符和右移操作符>> 注&#xff1a;移位操作符的操作数只能是整数&#xff0c;同时移位操作符移动的是存储在内存中的二进制位&#xff08;也就是补码&#xff09; 同时移位操作符不要移动负数位&#xff0c;这个是标准未定义…

Android 查看CUP占用率

查看每个进程CUP占用率的几种方式,由于自己充电界面老是导致整机温度过高&#xff0c;后面发现自己的线程一直在跑&#xff0c;相当于死循环&#xff0c;后面加上sleep才得以改善&#xff1b;先看看几种查询方式吧。 1、adb shell top 2、adb shell busybox top 3、adb shell …

SAM轻量化应用Auto-SAM、Group-Mix SAM、RAP-SAM、STLM

1. Auto SAM&#xff08;Auto-Prompting SAM for Mobile Friendly 3D Medical Image Segmentation&#xff09; 1.1 面临问题 医学背景&#xff1a; &#xff08;1&#xff09;与自然图像相比&#xff0c;医学图像的尺寸更小&#xff0c;形状不规则&#xff0c;对比度更低。&…

【Java】从0实现一个基于SpringBoot的个人博客系统

从0实现一个基于SpringBoot的个人博客系统 项目介绍准备工作数据准备创建项目准备前端页面编写配置文件 项目公共模块实体类公共层业务代码持久层实现博客列表实现博客列表约定前后端交互接口 实现博客详情约定前后端交互接口实现服务器代码 实现登录JWT令牌JWT令牌生成和校验实…