时间戳

首页 > 解决方案 > Vue.js：如何更改 Vue2-slider 组件的颜色

javascript - Vue.js：如何更改 Vue2-slider 组件的颜色

问题描述

我正在使用 vue 滑块。我想改变滑块的颜色。类名是“vue-slider-dot-tooltip-inner”。

下图是vue-slider的原始css。 原始css代码

现在我想像这样更改边框颜色和背景颜色。

.vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    border-color: #FBF6F7;
    background-color: #FBF6F7;
    box-sizing: content-box;
}

所以我尝试修复vue代码中的css代码。

我的模板。

<div class="slider">
        <vue-slider
        v-model="value"
        :dragOnClick="true"
        :adsorb="true"
        :marks="data.name"
        :included="true"
        :data="bar"
        :data-value="'id'"
        :data-label="'name'"
        class="vue-slider-rail"
    ></vue-slider>
</div>

css

<style lang="scss" scoped>
    .vue-slider-dot-tooltip-inner {
        font-size: 14px;
        white-space: nowrap;
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        border-color: #FBF6F7!important;
        background-color: #FBF6F7!important;
        box-sizing: content-box;
    }
</style>

但是我的 css 代码不起作用，所以我尝试了另一个 css 代码。

<style lang="scss" scoped>
    .slider >>> .vue-slider-dot-tooltip-inner {
        font-size: 14px;
        white-space: nowrap;
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        border-color: #FBF6F7!important;
        background-color: #FBF6F7!important;
        box-sizing: content-box;
    }
</style>

这段代码也不起作用，所以我需要有人帮我改变颜色。

标签： javascripthtmlcssvue.jssass

解决方案

请注意，您的<style>标签被标记为 is scoped，这将只保留此组件模板的样式。

您尝试更改的样式实际上是一个不同的组件，具有不同的标识符。

覆盖库组件时，您必须以非作用域样式进行。

就个人而言，我建议创建一个包含您希望在应用程序中覆盖的所有不同样式的文件，并从没有属性overrides.sass的顶级组件中调用它。scoped

示例：在App.vue：

<style lang="sass">
  @use './style/overrides.sass'
</style>

并在/style/overrides.sass：

.vue-slider-dot-tooltip-inner
  font-size: 14px
  white-space: nowrap
  padding: 2px 5px
  min-width: 20px
  text-align: center
  color: #fff
  border-radius: 5px
  border-color: #FBF6F7!important
  background-color: #FBF6F7!important
  box-sizing: content-box

为了具体起见，您可能希望添加!important到所有规则中，或者使选择更强：

.vue-slider-dot-tooltip .vue-slider-dot-tooltip-inner
  font-size: 14px
  ...

推荐阅读