自定义el-slider 滑块的样式

最近用到了element组件中的滑块,翻看了官网和网上一些案例,感觉和我要的样式都不太一样,下面记录一下我用到的两种自定义滑块。

效果图

第一种自定义画过的间断点样式

起始样式

image.png

滑动的样式

image.png

第二种自定义拖动滑块的样式

起始样式

image.png

滑动的样式

image.png

自定义画过的间断点样式的实现

<template><div class="d-flex align-items-start"><div class="search-item-label" style="line-height: 38px;">公网带宽</div><div class="d-flex align-items-center"><el-sliderclass="ml-1 mr-4":class="{'activeSlider0' : state.netBrandWidth > 0,'activeSlider1' : state.netBrandWidth > 50, 'activeSlider2' : state.netBrandWidth > 100, 'activeSlider3' : state.netBrandWidth > 150, 'activeSlider4' : state.netBrandWidth > 200}" // 滑动到不同位置时添加不同的classname,来定义滑动过后的样式v-model="state.netBrandWidth":min="0":max="200":marks="netBrandWidthMarks"  // 标记:format-tooltip="netBrandWidthFormatterTooltip" // 滑动快hover时上方显示文字style="width: 416px"></el-slider></div></div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const state = reactive({netBrandWidth: 1
})
const netBrandWidthMarks = ref({ // 标记0: '0M',50: '50M',100: '100M',150: '150M',200: '200M'
})
// 公网带宽
const netBrandWidthFormatterTooltip = (value) => { // 滑动快hover时上方显示文字return value > 0 ? `${ value }Mbps` : '无公网'
}
</script>
<style scoped lang="scss">
.el-slider__runway{ // 滑块的进度条颜色background-color: #F2F3F7;
}
.el-slider__stop { // 进度条上间断点的样式width: 10px;height: 10px;top: -2px;background: #FFFFFF;border: 1px dotted #4C66CE;box-sizing: border-box;
}.el-slider__button { // 拖动的滑块的样式width: 16px;height: 16px;background-color: #FFFFFF;box-shadow: 0px 0px 4px 0px rgba(64,83,159,0.73);border: 3px solid #4C66CE;
}
.el-slider__marks-text{ // 底部标记的样式font-size: 12px;color: #999999;
}
.activeSlider0 .el-slider__runway{ // 滑动到不同位置时添加不同的classname,来定义滑动过后的样式.el-slider__stop:first-child{ // 间断点样式background-color: #4C66CE;}
}
.activeSlider1 .el-slider__runway{.el-slider__stop:first-child,.el-slider__stop:nth-child(2){background-color: #4C66CE;}
}
.activeSlider2 .el-slider__runway{.el-slider__stop:first-child,.el-slider__stop:nth-child(2),.el-slider__stop:nth-child(3){background-color: #4C66CE;}
}
.activeSlider3 .el-slider__runway{.el-slider__stop:first-child,.el-slider__stop:nth-child(2),.el-slider__stop:nth-child(3),.el-slider__stop:nth-child(4){background-color: #4C66CE;}
}
.activeSlider4 .el-slider__runway{.el-slider__stop:first-child,.el-slider__stop:nth-child(2),.el-slider__stop:nth-child(3),.el-slider__stop:nth-child(4),.el-slider__stop:nth-child(5){background-color: #4C66CE;}
}
</style>

自定义拖动滑块样式的实现

<template><div class="d-flex align-items-start"><div class="search-item-label" style="line-height: 38px;">公网带宽</div><div class="d-flex align-items-center"><el-sliderclass="ml-1 mr-4"v-model="state.netBrandWidth":min="0":max="200":marks="netBrandWidthMarks"  // 标记:format-tooltip="netBrandWidthFormatterTooltip" // 滑动快hover时上方显示文字style="width: 416px"></el-slider></div></div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const state = reactive({netBrandWidth: 1
})
const netBrandWidthMarks = ref({ // 标记0: '0M',50: '50M',100: '100M',150: '150M',200: '200M'
})
// 公网带宽
const netBrandWidthFormatterTooltip = (value) => { // 滑动快hover时上方显示文字return value > 0 ? `${ value }Mbps` : '无公网'
}
</script>
<style scoped lang="scss">
.el-slider__stop { // 进度条上间断点的样式border: 1px solid var(--el-color-primary);box-sizing: border-box;
}.el-slider__button { // 拖动的滑块的样式width: 16px;height: 22px;border: 1px solid var(--el-color-primary);border-radius: 1px;position: relative;left: 4px;
}.el-slider__button:before { content: '';display: block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 3px;height: 6px;background: transparent;box-shadow: -3px 0 0 -1px var(--el-color-primary), 3px 0 0 -1px var(--el-color-primary);
}.el-slider__button:after {content: '';display: block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 1px;height: 7px;background: var(--el-color-primary);z-index: 999;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【递归、搜索与回溯算法练习】day2

文章目录 一、24. 两两交换链表中的节点1.题目简介2.解题思路3.代码4.运行结果 二、50. Pow(x, n)1.题目简介2.解题思路3.代码4.运行结果 三、2331. 计算布尔二叉树的值1.题目简介2.解题思路3.代码4.运行结果 总结 一、24. 两两交换链表中的节点 1.题目简介 24. 两两交换链表…

(13) Qt事件系统(two)

目录 事件分发函数 无边框窗口拖动 自定义事件 发送事件的函数 自定义事件 系统定义的事件号 自定义事件号 自定义事件类 发送和处理事件 sendEvent与postEvent的区别 栈区对象 堆区对象 事件传播机制 事件传播的过程 事件传播到父组件 鼠标单击事件与按钮单击信…

若依框架 - 对二次封装数据分页

LsDistrictController /*** 查询地段列表*/ApiOperation("查询地段列表")GetMapping("/list")public TableDataInfo list(LsDistrict lsDistrict) {startPage();Map<String, List> map lsDistrictService.selectLsDistrictList(lsDistrict);if (Col…

express学习笔记5 - 自定义路由异常处理中间件

修改router/index.js&#xff0c;添加异常处理中间件 *** 自定义路由异常处理中间件* 注意两点&#xff1a;* 第一&#xff0c;方法的参数不能减少* 第二&#xff0c;方法的必须放在路由最后*/ router.use((err, req, res, next) > {console.log(err);const msg (err &…

数字电路(一)

1、例题 1、进行DA数模转换器选型时&#xff0c;一般要选择主要参数有&#xff08; A&#xff09;、转换精度和转换速度。 A、分辨率 B、输出电流 C、输出电阻 D、模拟开关 2、下图所示电路的逻辑功能为&#xff08; B&#xff09; A、与门 B、或门 C、与非门 D、或非门 分析该…

程序员面试IT技术岗的三大技巧

文章目录 技巧一&#xff1a;深入研究意向企业技巧二&#xff1a;准备常见的面试问题技巧三&#xff1a;总结经历的面试题 在找工作时&#xff0c;面试是每位程序员必须经历的一关。面对众多求职者竞争激烈的情况&#xff0c;我们需要结合自己的现状&#xff0c;针对意向企业做…

C语言每日一题

今天分享的是一道牛客网上面的题目&#xff0c;链接在下面 有序序列合并 这道题做法有很多&#xff0c;最简单的是合并一起&#xff0c;然后用排序就行了&#xff0c;今天将一个最高效的办法&#xff0c;思路是两个数组第一项进行比较&#xff0c;小的先输出&#xff0c;输出的…

python3GUI--我的翻译器By:PyQt5(附下载地址)

文章目录 一&#xff0e;前言二&#xff0e;展示1.主界面2.段落翻译3.单词翻译 三&#xff0e;设计1.UI设计2.软件设计3.参考 四&#xff0e;总结 一&#xff0e;前言 很早之前写过一篇python3GUI–翻译器By:PyQt5&#xff08;附源码&#xff09; &#xff0c;但是发现相关引擎…

Java on VS Code 7 月更新|反编译器支持升级、代码补全性能提升、AI 相关更新及更多

作者&#xff1a;Nick Zhu 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎来到 Visual Studio Code for Java 的7月更新&#xff01;在这篇博客中&#xff0c;我们将为您提供有关反编译器支持的重要更新。此外&#xff0c;我们将分享更多最近代码补全性能提升的进展&#x…

【ChatGPT】基于WSL+Docker的ChatGPT PLUS共享服务部署

最近买了ChatGPT PLUS服务&#xff0c;想通过web服务将它共享给其他人使用&#xff0c;搜了一下目前GitHub上比较热门的服务有 ChatGPT-Next-Webchatgpt-web-share 其中chatgpt-web-share支持API和PLUS账号分享两种方式&#xff0c;且架构为PythonJSDocker&#xff0c;相对比…

【LeetCode】27. 移除元素

题目大概意思是剔除nums数组中出现的所有val值。可以用快慢双指针法来做。 快的指针在前面遍历找值不为val的元素的下标&#xff0c;慢的负责接收值不为val的元素&#xff0c;并及时更新数组。 class Solution {public int removeElement(int[] nums, int val) {//快慢指针法in…

【Liux下6818开发板(ARM)】实现简易相册

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…

介绍如何快速传输100G大文件传输方法

如何快速地将100GB的大文件从一个地方传送到另一个地方&#xff0c;这是许多人都遇到过的一个难题&#xff0c;无论是个人用户还是企业用户&#xff0c;都有这样的需求。在很多场合&#xff0c;我们需要将大文件迅速地发送到远程位置。比如&#xff0c;当我们需要对重要数据进行…

心法利器[93] | 谈校招:技术面

心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会&#xff0c;与大家一起成长。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。 2022年新一版的文章合集已经发布&#xff0c;累计已经60w字了&#xff0c;获取方式看这里&…

DeepVO 论文阅读

论文信息 题目&#xff1a;DeepVO Towards End-to-End Visual Odometry with Deep Recurrent Convolutional Neural Networks 作者&#xff1a;Sen Wang, Ronald Clark, Hongkai Wen and Niki Trigoni 代码地址&#xff1a;http://senwang.gitlab.io/DeepVO/ (原作者并没有开源…

插入排序算法

插入排序 算法说明与代码实现&#xff1a; 以下是使用Go语言实现的插入排序算法示例代码&#xff1a; package mainimport "fmt"func insertionSort(arr []int) {n : len(arr)for i : 1; i < n; i {key : arr[i]j : i - 1for j > 0 && arr[j] > …

Python web实战 | 使用 Flask 实现 Web Socket 聊天室

概要 今天我们学习如何使用 Python 实现 Web Socket&#xff0c;并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。 什么是 Web Socket&#xff1f; Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的…

【编程语言 · C语言 · 学生管理系统】

【编程语言 C语言 学生管理系统】https://mp.weixin.qq.com/s?__bizMzg4NTE5MDAzOA&mid2247491542&idx1&snf9b72a5af62a93bc902c5467056a9343&chksmcfade32ff8da6a3956be7d6a5dceb97de27e25157804abf8a3193272fa8ad68e78640ca33a5c&token1462056111&…

【大数据之Flume】四、Flume进阶之复制和多路复用、负载均衡和故障转移、聚合案例

1 复制和多路复用 &#xff08;1&#xff09;需求&#xff1a;使用 Flume-1 监控文件变动&#xff08;可以用Exec Source或Taildir Source&#xff09;&#xff0c;Flume-1 将变动内容传递给 Flume-2&#xff08;用Avro Sink传&#xff09;&#xff0c;&#xff08;用Avro Sou…

BugKu CTF(杂项篇MISC)—想要种子吗

BugKu CTF(杂项篇MISC)—想要种子吗 提 示: 描 述:flag{} 题目下载后是一张图片&#xff0c;打开如下。 一、工具 十六进制编辑器010 editor kali系统文件分离工具binwalk或者foremost 维吉尼亚密码 STEGHIDE图片隐写工具 文章所需的软件下载地址 ARCHPR压缩包密码破解…