首页 > 其他分享 >vue3使用van-picker组件时,滑动选中某个数值时在旁边相应显示单位

vue3使用van-picker组件时,滑动选中某个数值时在旁边相应显示单位

时间:2024-04-08 16:31:02浏览次数:22  
标签:picker __ after van 50% 单位 vue3

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

相关文章

  • Science Advances | 全球植物吸收的二氧化碳可能比我们想象的多20%
    在围绕气候变化及其对地球的深远影响的研究领域,几乎没有什么好消息可报告,然而一个国际科学家小组可能已经找到了一个值得庆祝的小胜利。西悉尼大学的于尔根-克瑙尔(JürgenKnauer)领导的科学家们利用现实的生态建模发现,全球植被实际吸收的人类排入大气中的二氧化碳可能会增加约2......
  • Vue3入门笔记【黑马】
    目录:认识Vue31.Vue3的优势使用create-vue搭建Vue3项目1.认识create-vue2.使用create-vue创建项目熟悉项目和关键文件组合式API-setup选项1.setup选项的写法和执行时机2.setup中写代码的特点3.setup语法糖组合式API-reactive和ref函数1.reactive2.ref3.re......
  • vue3+uniapp手写日历组件
    为了满足产品需求,在日历中可以添加排班信息,点击日期可以获取排班日期详细数据,自定义日历样式,并且支持手动折叠和展开,折叠时只显示当前周的日期,由于现有组件库修改起来比较麻烦,自己就手写了一个日历组件,下面是我代码及思路。代码写的不好仅供参考,如有异议欢迎评论指正,感谢。一......
  • 03-template-advance
    03-TemplateAdvance源作者地址:https://github.com/bonfy/go-mega仅个人学习使用学习完第二章之后,你对模板已经有了基本的认识本章将讨论Go的组合特性,以及建立一个通用的调用模板的方法本章的GitHub链接为:Source,Diff,Zip匿名组合匿名组合其实是Go里的一个非常......
  • 基于vue3的Crontab组件
    网上找的没有满意的,决定从若依前后端分离其前端vue2中的crontab进行转换,先上效果若依: 改后:  v2转v3没什么难度,其中有大量的将this.***替换为***.value,笔者写了个正则替换,希望可以帮助大家this.(\w+)$1.value 需要注意的有,在v2中【this.$refs[refName......
  • SciTech-Mathmatics-Advanced Algebra-LinearAlgebra: 矩阵的相抵、相似与合同
    https://www.math.pku.edu.cn/teachers/baozq/algebra/alg1.htm矩阵的相抵、相似与合同基本概念:相抵,相抵标准形相似,对角化,迹,可对角化矩阵的相似标准形特征值,特征向量,特征多项式,特征子空间正交矩阵,Kn的内积,标准正交基实对称矩阵的正交相似标准形二次型......
  • vue3的ref和reactive函数
    在vue3中需要引入ref和reactive函数对变量进行声明 首先引入ref,reactive函数,vue3不同于vue2的是,变量的声明需要写在setup函数中,(vue2是直接写在data函数中)其中ref主要是对一些基础数据变量声明,如string,number,boolean,而reactive则是对复杂的,入对象进行声明最后,定义......
  • 从0到1搭建一个Vue3+Electron的框架
    1.前言:上篇文章中使用到了Vue+Electron框架,这一篇文章主要讲解这个框架如何搭建2.Vue3+Vite项目搭建执行命令行,创建Vue3+Vite脚手架:npmcreatevite或yarncreatevite修改脚手架中的无用部分删除src/components下的所有文件修改src/App.vue内容<!--*@......
  • Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)
    生命周期之前在Servlet等也学习过生命周期,相同的,VUE组件也有生命周期。VUE组件完全解析到浏览器,会经过如下过程。(简单理解)vue组件被实例化的过程,称为,组件实例化。组件实例解析到浏览器中,称为,挂载。组件实例从浏览器中删除,称为,卸载。钩子函数vue组件解析到浏览器的......
  • Vue3 + TypeScript + Vite 初始项目搭建(ESLint、Prettier、Sass、Stylelint、husky、p
    仓库地址仓库地址:https://gitee.com/tongchaowei/vue-ts-vite-template项目源码下载:https://gitee.com/tongchaowei/vue-ts-vite-template/releases全局安装pnpm包管理工具执行如下命令在系统全局安装pnpm包管理工具:npmipnpm-g使用Vite脚手架创建Vue3......