vue3+ts 自定义el-slider，原点显示数字

꧁“杂货店”꧂

于 2024-02-15 22:59:12 发布

阅读量1.1k

点赞数 11

分类专栏：笔记文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45287575/article/details/136124373

版权

先看效果图：
不可转发，请尊重原创

这里我默认使用的是element-Plus的el-slider组件
原始效果是这样的:
在这里插入图片描述
可以查看官网自行查看：https://element-plus.gitee.io/zh-CN/component/slider.html

这里先说一下原理，使用的原理是css的content属性，如果不知道的请自行学习后查看本文。在结合::after和::before伪元素结合;

看页面html+css判断进行操作的class是谁?

在这里插入图片描述
主要修改.el-slider__button-wrapper 修改el-slider__button是为了把原点改成方形,这样可以显示更多内容;其代码是:

// 改变滑块原点大小和颜色  el-slider__button
:deep() .el-slider__button {
    color: red;
    width