element-plus+vue3 如何让el-slider的tooltip一直显示呢？设置show-tooltip不生效?

Question

element-plus+vue3 如何让el-slider的tooltip一直显示呢？设置show-tooltip不生效?

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析： 根据element-plus官方文档，show-tooltip属性可以用来控制tooltip的显示和隐藏。但是在实际中，我们发现当show-tooltip设置为true时，tooltip并不会一直显示出来。 解决方案： 在使用el-slider时，可以通过控制tooltip-class属性和自定义样式来实现tooltip的持续显示。 具体步骤如下：

1. 在el-slider组件上设置tooltip-class属性，用来控制tooltip的样式。

<el-slider v-model="value" :tooltip-class="tooltipClass"></el-slider>

1. 在Vue实例的data属性中创建tooltipClass属性，作为tooltip的样式。

data() {
  return {
    value: 50,
    tooltipClass: "show-tooltip"
  };
}

1. 在CSS样式中定义show-tooltip类，并设置display属性为block，来实现tooltip的持续显示。

.show-tooltip .el-tooltip {
  display: block;
}

案例：

<template>
  <div>
    <el-slider v-model="value" :tooltip-class="tooltipClass"></el-slider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 50,
      tooltipClass: "show-tooltip"
    };
  }
};
</script>
<style>
.show-tooltip .el-tooltip {
  display: block;
}
</style>

在上述案例中，设置了tooltipClass属性为show-tooltip，在CSS样式中定义了show-tooltip类，并设置display属性为block，即可实现el-slider的tooltip一直显示的效果。