<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