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

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

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

<van-pickerclass="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: "", //保存选择的keytitleText: ""});
	//日期选择器 选中文字/* 只针对带有 '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;}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

今日刷三题(day11):不同路径的数目(一)+短距离最小路径和+把数字翻译成字符串

题目一&#xff1a;不同路径的数目&#xff08;一&#xff09; 题目描述&#xff1a; 一个机器人在mn大小的地图的左上角&#xff08;起点&#xff09;。机器人每次可以向下或向右移动。机器人要到达地图的右下角&#xff08;终点&#xff09;。可以有多少种不同的路径从起点…

ICME2024 | 基于半监督对比学习的表现力语音合成

人类的语音极富表现力&#xff0c;不仅包括语调和重读&#xff0c;还包括风格和情感等多种元素。表现力语音合成的目标是要精准捕捉并再现这些元素。先前表现力语音合成方面的研究通常将表现力视为单一维度&#xff0c;如风格或情感。但实际上&#xff0c;风格可以随着文本和场…

Matlab实现分段函数拟合(分段点未知)| 源码分享 | 视频教程 | 三种分段函数拟合方法

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…

Davinci工程CANTP模块讲解

配置CAN的TP模式&#xff0c;涉及BSW\CanTp\CanTp.c和CanTp.h CanTpChannels 他有两组收发&#xff0c;功能诊断和物理诊断。 功能诊断有自己的参数要求 物理诊断的接收要求相对多一些 由于发送只有一个&#xff0c;所以我们把它放在物理诊断接收那组里面。 CanTpGeneral 也…

DDD架构学习

文章目录 领域建模事件风暴四色建模法 DDD名称解析领域子域核心域通用域支撑域限界上下文战术设计实体值对象聚合和聚合根工厂资源库领域服务领域事件 DDD代码的分层名词解析实体值对象聚合根领域服务领域事件 VO&DTO&DO&PO博客 领域建模 领域驱动设计的核心在于领…

厚德提问大佬答3:让AI绘画更有效率

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你解…

iOS xib布局

1.多次启动发现启动图和截屏的图片不一致,设置launch storyboard 不能到顶部 https://blog.csdn.net/u011960171/article/details/104053696/ 2.multipiler是比例&#xff0c;需要控制顺序1.视图&#xff0c;2父视图&#xff0c;选择宽度比例&#xff0c;默认是1 3.Aspect R…

【Java基础】Java异常处理机制超简单的!!

程序在运行时出现的不正常情况 java把程序运行时出现的各种不正常情况提取属性和行为进行描述&#xff0c;从而出现了各种异常类&#xff0c;也就是异常被面向对象了。 异常名称、异常信息、异常发生的位置 Exception in thread "main" java.lang.ArrayIndexOutOf…

海淘美国礼品卡测评:AE/TT/香草卡与国内卡商、亚马逊测评工作室如何变现?(下)

上回分析的四种变现模式&#xff0c;相信大家已经了解清楚。 塔吉特礼品卡&#xff0c;香草礼品卡&#xff0c;AE礼品卡&#xff0c;百思买礼品卡&#xff0c;亚马逊礼品卡&#xff0c;沃尔玛礼品卡&#xff0c;丝芙兰礼品卡&#xff0c;雷蛇礼品卡&#xff0c;谷歌礼品卡&…

处理推送被拒绝的问题

处理推送被拒绝的问题 问题描述 error: failed to push some refs to hint: Updates were rejected because the remote contains work that you do not have locally. This is usually caused by another repository pushing to the same ref. You may want to first integ…

大模型入门(二)—— PEFT

PEFT&#xff08;Parameter-Efficient Fine-Tuning&#xff09;是hugging face开源的一个参数高效微调大模型的工具&#xff0c;里面集成了4中微调大模型的方法&#xff0c;可以通过微调少量参数就达到接近微调全量参数的效果&#xff0c;使得在GPU资源不足的情况下也可以微调大…

《ElementUI 基础知识》el-tree 之“我的电脑”目录结构效果

前言 项目需求&#xff0c;Web 端获取服务器文件夹目录结构。目录数据是调接口获取&#xff0c;本篇略过&#xff0c;直接展现数据&#xff01; 效果 实现 html 代码 8 - 15 行&#xff0c;自定义节点信息&#xff1b;代码 9 - 14 行&#xff0c;判断 icon 显示&#xff1b…

[沫忘录]MySQL储存对象

[沫忘录]MySQL储存对象 视图 视图本质是对原表(基表)显示上的裁剪&#xff0c;可以当作表进行操作&#xff0c;其操作的结果会直接反馈到原表上&#xff0c;即对视图的操作实质上是对原表的操作。 MySQL不仅支持为基表创建视图&#xff0c;同时也支持为视图创建视图。 基本语…

如何备份firewalld的配置信息?

要备份Firewalld的配置信息&#xff0c;您可以通过以下步骤进行&#xff1a; 备份配置文件&#xff1a; Firewalld的配置文件位于/etc/firewalld/目录下。您可以使用cp命令来备份这些文件到其他位置&#xff0c;例如&#xff1a; cp -r /etc/firewalld/zones /path/to/backup…

Bumblebee X系列用于高精度机器人应用的新型立体视觉产品

Bumblebee X是最新的GigE驱动立体成像解决方案&#xff0c;为机器人引导和拾取应用带来高精度和低延迟。 近日&#xff0c;51camera的合作伙伴Teledyne FLIR IIS推出一款用于高精度机器人应用的新型立体视觉产品Bumblebee X系列。 Bumblebee X产品图 BumblebeeX系列&#xff…

在JavaScript中获取当前页面路径的方法

在Web开发中&#xff0c;我们经常需要获取当前页面的URL路径&#xff0c;以便进行导航、数据加载或其他与页面相关的操作。JavaScript提供了几种方法来帮助我们实现这一功能。在本文中&#xff0c;我们将探讨几种常用的方法。 方法一&#xff1a;使用 window.location 对象 wi…

百度云内容审核快速配置 (java)

为什么要选择百度云 &#xff1f; 因为他免费用一年 首先要先开通百度云内容安全服务 按照操作指引走完整套 ContentCensor Java SDK目录结构** com.baidu.aip├── auth //签名相关类├── http //Http通…

IDEA 好用的插件

图标插件&#xff1a;Atom Material Icons 此插件的作用就是更好的显示各种文件的类别&#xff0c;使之一目了然 汉化包 Chinese ​(Simplified)​ Language Pack / 中文语言包 作用就是 汉化 AI编码助手 GitHub Copilot AI编码助手&#xff1a;提示代码很好用 缺点&#xff1a…

vue3在router中使用pinia报错解决

问题 在router中使用pinia&#xff08;getActivePinia was called with no active Pinia. Did you forget to install pinia&#xff09;报错解决 解决 store/index.ts import { createPinia } from piniaconst pinia createPinia() export default piniamain.ts&#xff…

使用perf查看热点函数和系统调用最大延迟函数

1、安装perf工具 1.1、ubuntu 18.04 x86下的安装 安装sudo apt install linux-source sudo apt install linux-tools-uname -r # ubuntu 18.04虚拟机实操可行 1.2、ubuntu 18.04 ARM下的安装 参考 Nvidia Jetson系列产品安装Perf ​ARM64版本的Ubuntu上安装perf 与参考文…