起因
看到沸点里有人提问,出于好奇实现了一下。
实现的话嘛,主要就是利用 format-tooltip
把左右值反转一下,综合了沸点评论大佬的代码。先上图,官方例子里面改动的点图中都标注出来了,下面也有代码。
template
代码
<template>
<div class="block">
<el-slider
v-model="value"
:format-tooltip="handleFormatTooltip"
range
:marks="marks"
@change="handleChange"
>
</el-slider>
</div>
</template>
js
代码
data() {
return {
value: [30, 40].map(item => 100 - item),
marks: {
0: '100',
8: '92',
37: '63',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}
},
methods: {
handleFormatTooltip(val) {
return val === 100 ? '0' : 100 - val
},
handleValue(val) {
return val
},
handleChange(val) {
const newVal = val.map(item => 100 - item).reverse()
console.log(newVal)
}
}