首页 > 其他分享 >el-slider实现滚动条自定义分段颜色

el-slider实现滚动条自定义分段颜色

时间:2024-07-29 23:39:24浏览次数:14  
标签:el style const 自定义 newsliderBar 滚动条 slider MutationObserver

<template>
  <el-slider
    ref="sliderRef"
    class="!w-80%"
    style="--el-slider-runway-bg-color: red; --el-slider-main-bg-color: green"
    v-model="speedRange"
    range
    :min="0"
    :step="0.1"
    :max="50"
    size="small"
  />
</template>

<script setup lang="ts">
const sliderRef = ref();
const speedRange = ref([0, 50]);
onMounted(() => {
  nextTick(addSliderBarToSlider);
});
/** 增加SliderBar,并增加Style监听 */
const addSliderBarToSlider = () => {
  const newsliderBar = document.createElement('div');
  newsliderBar.className = 'el-slider__bar';
  newsliderBar.style.backgroundColor = 'blue';
  newsliderBar.style.right = '0%';
  let sliderBar = sliderRef.value.$el.firstElementChild.firstElementChild;
  sliderRef.value.$el.firstElementChild.appendChild(newsliderBar);
  // 创建一个MutationObserver实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes') {
        newsliderBar.style.width = `calc(100% - ${sliderBar.style.width} - ${sliderBar.style.left})`;
      }
    });
  });
  // 配置MutationObserver以监听属性变化
  observer.observe(sliderBar, {
    attributes: true,
    attributeFilter: ['style'],
  });
};
</script>

<style lang="scss" scoped>
.el-slider {
  --el-slider-border-radius: 2px;
  --el-slider-height: 4px;
  --el-slider-button-size: 14px;
}
</style>

Dom-API | MutationObserver使用方法详解

标签:el,style,const,自定义,newsliderBar,滚动条,slider,MutationObserver
From: https://www.cnblogs.com/echohye/p/18331309

相关文章

  • Linux Shell远程执行命令
    shell远程执行:    经常需要远程到其他节点上执行一些shell命令,如果分别ssh到每台主机上再去执行很麻烦,因此能有个集中管理的方式就好了。一下介绍两种shell命令远程执行的方法。 前提条件:配置ssh免密码登陆对于简单的命令:如果是简单执行几个命令,则:ssh......
  • android 14开机流程详细分析(上) - Boot ROM,Boot loader,kernel,init
    androidu开机流程详细分析本文基于android-14.0.0_r2源码AOSP架构AOSP的软件堆栈包含以下层:图1.AOSP软件堆栈架构下面列出了图1中使用的术语的定义:Android应用完全使用AndroidAPI开发的应用。GooglePlay商店广泛用于查找和下载Android应用,不过也......
  • 前端Vue组件化实践:打造自定义等宽tabs标签组件
    在前端开发的世界里,随着业务复杂度的提升和需求的多样化,传统的整体式开发方式已经难以满足快速迭代和高效维护的需求。组件化开发作为一种重要的解决方案,正逐渐受到广大开发者的青睐。本文将结合Vue框架,探讨如何通过组件化开发实现一个自定义等宽标签栏,并分享其在实际业务场景......
  • CentOS 7 yum无法使用解决方法Could not retrieve mirrorlist http://mirrorlist.cent
    在centos7中使用yum命令事后报错:LoadingmirrorspeedsfromcachedhostfileCouldnotretrievemirrorlisthttp://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stockerrorwas14:curl#6-"Couldnotresolvehost:mirrorlist.centos.org;......
  • Pinely Round 4 (Div. 1 + Div. 2) 赛后总结
    PinelyRound4(Div.1+Div.2)赛时提交情况:CF1991A.MaximizetheLastElement赛时思路首先,CF判断了足足2min确定我是真人,看到题目时首先想到的是,最后保留的数字之前及之后必然有偶数个数字,且\(n\)为奇数,所以我们可以确定若\(a_i\)是最后保留的数字,\(i\)必然为奇......
  • springbootsecurity整合thymeleaf
    首先创建一个springboot项目然后加入相关依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="......
  • Pinely Round 4 (Div. 1 + Div. 2)
    Preface难得地有直觉的一场,50min过了前5题后形式大好,然后F也一眼看出了有个斐波那契的上界结果写了个暴力判断交上去一直挂,前面一直以为是一定有解的阈值设错了,没想到挂了好几发后发现暴力漏了一种Case,真是唐完了A.MaximizetheLastElement不难发现只有奇数位置上的......
  • Laravel序列化解码:深入Eloquent模型的序列化机制
    Laravel序列化解码:深入Eloquent模型的序列化机制引言Laravel作为一门优雅的PHPWeb开发框架,提供了许多便利的功能来简化开发过程。其中一个强大而易用的功能便是模型的序列化。序列化是将对象状态转换为可以存储或传输的格式的过程。在Laravel中,EloquentORM支持模型的自......
  • git 、shell脚本
    git文件版本控制 安装gityum-yinstallgit创建仓库将文件提交到暂存gitadd.#将暂存区域的文件提交仓库gitcommit-m"说明"#推送到远程仓库gitpush#获取远程仓库的更新gitpull#克隆远程仓库gitclone#分支,提高代码的灵活性#检查分支gitbranch#......
  • DelphiJNI实际调试
    1:下载DelphiJNI:下载地址https://github.com/aleroot/DelphiJNI,版本比较老,没有找到其他,就用这个吧,如朋友有较新的pas文件,请留言下2:下载jdk,这里下载JDK,这里使用javase-jkd18,也不知道这个版本要不要收费,这里学习用暂时不关新这个。3:编写调用class的代码,DelphiJNI没有demo,看代码云......