vant的官方文档中没有支持这种需求的属性或方法,所以只能自己找别的方法。
方法一
van-picker控件选中某个元素时,该元素会有一个类名van-picker-column__item–selected
我们可以在css里给这个类名通过::after,即使用伪类,来添加单位
.van-picker-column__item--selected::after{
content:'%',
color:red
// 还可以自己定义其他样式
}
但是,这样实现,只有在滑动松手后才会显示单位,滑动过程中不会显示单位,体验不好
方法二(推荐)
给van-picker组件的子组件添加伪类,其实就是相当于一个div一直显示在固定位置。
:deep(.van-picker){
.van-picker__columns::after {
content: "℃";
position: absolute;
top: 50%; // 单位上下居中显示
transform: translate(-50%, -50%); // 单位上下居中显示
left: calc(50% + 23px);
font-size: 10px;
color: #999999;
}
}
标签:picker,__,after,van,50%,单位,vue3
From: https://blog.csdn.net/qq_45755298/article/details/137512958