el-slider使用marks如何设置class类名

在 el-slider 中，可以通过设置 marks 属性来添加标记，同时可以通过设置 mark-class 属性来为这些标记添加自定义的 class 类名。具体的方法如下所示：

<el-slider :marks="marks" :mark-class="markClass"></el-slider>

其中，marks 是一个对象，用于设置标记的位置和显示文本，markClass 是一个函数，用于返回每个标记的自定义 class 类名。具体的代码实现可以参考下面的示例：

data() {
  return {
    marks: {
      0: '0°C',
      10: '10°C',
      20: '20°C',
      30: '30°C',
      40: '40°C',
      50: '50°C',
      60: '60°C',
      70: '70°C',
      80: '80°C',
      90: '90°C',
      100: {
        style: {
          color: 'red'
        },
        label: <strong>100°C</strong>
      }
    }
  }
},
methods: {
  markClass(mark) {
    return mark % 10 === 0 ? 'mark10' : '';
  }
}

在这个示例中，我们设置了 11 个标记，每个标记的位置是 0 到 100 之间的某个整数，显示文本是一个字符串或一个带样式的 HTML 元素。同时，我们定义了一个 markClass 方法来为每个标记返回一个自定义的 class 类名，如果该标记位置是 10 的倍数，则添加 mark10 类名，否则返回空字符串。在样式表中可以为 mark10 类名设置相应的样式，从而实现自定义的标记样式。