DataV修改排名轮播表（dv-scroll-ranking-board）样式

最新推荐文章于 2024-07-02 15:39:39 发布

HQBCK

最新推荐文章于 2024-07-02 15:39:39 发布

阅读量838

点赞数 4

文章标签： html 前端 vue.js javascript

本文链接：https://blog.csdn.net/HQBCK/article/details/137079614

版权

本文指导如何根据排名修改dv-scroll-ranking-board组件的背景颜色，包括导入路径调整和使用线性渐变实现不同排名对应的不同颜色效果。

摘要由CSDN通过智能技术生成

需求：根据排名修改其背景色

找到组件dv-scroll-ranking-board下载后的文件位置将其复制到你需要的文件位置

修改组件中引入的方法路径

修改为

import autoResize from "@jiaminghi/data-view/lib/mixin/autoResize";

修改样式

<div class="ranking-column">
        <div
          class="inside-column"
          :style="`width: ${item.percent}%;background: ${bgColor(
            item.ranking
          )}`"
        >
     <div class="shine" />
  </div>
</div>

bgColor(value) {
      let style =
        "linear-gradient(to right,rgba(0, 180, 255, 0),rgba(0, 180, 255, 1))";
      if (value == 1) {
        style =
          "linear-gradient(to right,rgba(251, 37, 93, 0),rgba(251, 37, 93, 1))";
      } else if (value == 2) {
        style =
          "linear-gradient(to right,rgba(221, 104, 41, 0),rgba(221, 104, 41, 1))";
      } else if (value == 3) {
        style =
          "linear-gradient(to right,rgba(255, 246, 1, 0),rgba(255, 246, 1, 1))";
      }
      return style;
    },