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;
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值