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

最新推荐文章于 2025-05-09 11:41:05 发布

原创最新推荐文章于 2025-05-09 11:41:05 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vant #ts #vue3

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

主要就是在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;
	}