首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何更改孩子的颜色

如何更改孩子的颜色
EN

Stack Overflow用户
提问于 2018-08-06 23:20:26
回答 1查看 58关注 0票数 -1

请告诉我如何使用Vue.js和/或SCSS工具来实现逻辑。根据子div的级别(data-level -从1到6),颜色会发生变化。在jQuery中有一个已实现的示例。

Here Is My jsfiddle

代码语言:javascript
复制
  .ui-core-skill {
     display: flex;
     align-items: center;
 }

 .ui-core-skill-name {
    float: left;
    margin: 0 7px 0 0;
 }

 .ui-core-skill-level {
    display: flex;
    align-items: center;

 .dot-max {
     height: 9px;
     width: 9px;
     float: left;
     border-radius: 50%;
     margin: 0 5px 0 5px;
  }

.dot-mid {
     height: 7px;
     width: 7px;
     @extend .dot-max;
 }

.dot-min {
    height: 5px;
    width: 5px;
    @extend .dot-max;
  }
}
代码语言:javascript
复制
<div class="ui-core-skill">
<span class="ui-core-skill-name">Name</span>
 <div class="ui-core-skill-level" data-level="4">
    <div class="dot-max"></div>
    <div class="dot-mid"></div>
    <div class="dot-min">
  </div>
</div>
</div>

EN

回答 1

Stack Overflow用户

发布于 2018-08-08 05:32:31

仅使用scss的最简单的解决方案是为每个级别执行以下操作:

代码语言:javascript
复制
/*Your old scss goes above here*/

.ui-core-skill-level[data-level="4"] {
   .dot{
     &-max{
        background-color: rgba(238, 122, 71, 1);
     }

     &-mid{
        background-color: rgba(238, 122, 71, 1);
     }

     &-min{
        background-color: rgba(238, 122, 71, .3);
     }
   }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51710881

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档