[英]Vue.js: How to change the colors of Vue2-slider component
I am using vue-slider.我正在使用 vue-slider。 I want to change the color of the slider.
我想更改 slider 的颜色。 The class name is "vue-slider-dot-tooltip-inner".
class 名称是“vue-slider-dot-tooltip-inner”。
The picture below is the original css of vue-slider.下图是vue-slider的原版css。
Now I want to change border-color and background-color like this.现在我想像这样更改边框颜色和背景颜色。
.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;
}
So I tried to fix the css code in the vue code.于是尝试修复vue代码中的css代码。
My template.我的模板。
<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 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>
But my css code did not work, so I tried another css code.但是我的 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>
This code also did not work, so I need someone to help me out to change the colors.此代码也不起作用,所以我需要有人帮我更改 colors。
Note that your <style>
tag is marked is scoped
, which will keep your style only for this component template.请注意,您的
<style>
标记被标记为scoped
,这将只为该组件模板保留您的样式。
The style you are trying to change is actually a different component, having a different identifier.您尝试更改的样式实际上是一个不同的组件,具有不同的标识符。
When overwriting library components, you'll have to do it in a non-scoped style.覆盖库组件时,您必须以非作用域样式进行。
Personally, I'd recommend creating an overrides.sass
file with all the different styles you wish to override in your app, and call it from a top-level component with no scoped
attribute.就个人而言,我建议创建一个
overrides.sass
文件,其中包含您希望在应用程序中覆盖的所有不同 styles 文件,并从没有scoped
属性的顶级组件中调用它。
Example: in App.vue
:示例:在
App.vue
中:
<style lang="sass">
@use './style/overrides.sass'
</style>
and in /style/overrides.sass
:在
/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
For the sake of specificity, you might want to add !important
to all rules, or make the selection stronger:为了具体起见,您可能希望将
!important
添加到所有规则中,或者使选择更强:
.vue-slider-dot-tooltip .vue-slider-dot-tooltip-inner
font-size: 14px
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.