elementui⾃定义Slider样式
先看效果图
⾃定义两个内容：
提⽰信息⼀直显⽰
⾃定义间断点样式
代码如下
<template>
<div class="content">
<div class="my-slider">
<div class="my-slider__tooltip" :>
<el-button
class="my-slider__tooltip-wrapper"
size="mini"
type="text"
>
{{ curTime }}
</el-button>
</div>
<el-slider v-model="value" :min="min" :max="max" :show-tooltip="false" @input="onlyChangeTime" :marks="setMarker"></el-slider>        </div>
</div>
</template>
<script>
import moment from 'moment'
export default {
data(){
return {
value:0,//model
min:0,//最⼩值
max:3600,//最⼤值
timeData:[],//数据list
curTime:''//上⽅tip展⽰
}
},
created(){
// 模拟⼀⼩时数据
var today = moment().format("YYYY-MM-DD")+" 00:00:00";
var start = new Date(today).getTime();
var timeRange = [];
for(var i=0;i<=3600;i++){
timeRange.push(start+i*1000)
}
this.timeData = timeRange;
},
computed:{
// 时间轴的点
setMarker() {
// 模拟每300个点加分割线
let marks = {};
for (let i = 0; i <= 3600; i++) {
if (i % 300 == 0) {
marks[i] = {
label: this.$createElement('span', moment(this.timeData[i]).format("HH:mm:ss"))
label: this.$createElement('span', moment(this.timeData[i]).format("HH:mm:ss"))                    };
}
}
return marks;
},
// tip距离左侧百分⽐
style() {
let length = this.max - this.min;
let progress = this.value - this.min;
let left = length == 0?0:progress / length * 100;
return {
paddingLeft: `${left}%`,
}
},
},
methods:{
//拖拽进度条修改时间
onlyChangeTime(v) {
this.curTime = moment(this.timeData[v]).format("HH:mm:ss");
}
}
}
</script>
<style lang="less">
.
content{
color: #fff;
background: rgba(26,37,58,0.5);
}
.my-slider{
position: relative;
width: calc(100% - 400px);
height: 160px;
margin: 0 auto;
font-size: 12px;
.my-slider__tooltip {
text-align: left;
position: absolute;
top: 16px;
left: -20px;
.my-slider__tooltip-wrapper {
height: 32px;
background: transparent;
border: none;
color: #fff;
cursor: unset;
}
}
}
.el-slider{
box-sizing: border-box;
position: absolute;
width: 100%;
top: 60px;
}
.el-slider__runway{
background-color: #fff;
}
.
el-slider__bar{
background: rgba(150,221,105,1);
}
.el-slider__button{
border:2px solid  rgba(150,221,105,1);
background:  rgba(150,221,105,1);
}
}
.el-slider__stop{
visibility: hidden;
}
.
el-slider__button-wrapper{
position: relative;
top: -6px;
&::after{
content: '';
width: 1px;
height: 36px;
position: absolute;
top: -30px;
left: 18px;
border-right: 1px solid #96DD69;    }
}
.el-slider__marks-text {
margin-top: -4px;
transform: translateX(0);
&::after{
content: '';
width: 1px;
height: 24px;
position: absolute;
top: -40px;
left: -2px;
border-right: 1px solid #fff;
}
span{
position: absolute;
box sizingleft: -26px;
color: #fff;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。