element slider 左右翻转实现(左边值大,右边值小)

88 阅读1分钟

起因

看到沸点里有人提问,出于好奇实现了一下。

image.png

实现的话嘛,主要就是利用 format-tooltip 把左右值反转一下,综合了沸点评论大佬的代码。先上图,官方例子里面改动的点图中都标注出来了,下面也有代码。

image.png

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)
  }
}