进度条评论

最新推荐文章于 2024-08-21 14:09:37 发布

梦柒-Lotus.

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量127

点赞数 2

文章标签：前端 html javascript 笔记

本文链接：https://blog.csdn.net/weixin_67123189/article/details/137820464

版权

效果图：

代码部分：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue 进度条评论功能</title>
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    <style>
      .box {
        position: relative;
        width: 300px;
        height: 30px;
        border-radius: 15px;
        background-color: #eeeeee;
      }

      .box-list {
        display: flex;
      }

      .list-item {
        z-index: 99;
        flex: 1;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #000000;
      }

      .bg {
        z-index: 9;
        position: absolute;
        left: 0;
        top: 0;
        height: 30px;
        border-radius: 15px;
        background: linear-gradient(to right, rgba(255, 105, 182), rgba(250, 52, 51));
        // 设置进度的颜色为渐变色
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="box">
        <div class="box-list">
          <div 
               class="list-item" 
               v-for="(item，index) in 10"
               key="index"
               @click="handleClick(item)" 
               :style="{ color: getColor(item) }" 
               >{{item}}</div>
        </div>
        <div class="bg" :style="bgStyle"></div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: '<h1>进度条评论功能</h1>',
          bgStyle: {width: item * 300 + 'px'}，// 设置默认进度为10
          selectedNumber：null,
        },
        methods: {
          getColor(item) {
             return this.selectedNumber && this.selectedNumber >= item ? '#fff' : 'black';
              // 从1到当前点击的数字进度条下方的文字设置为白色，从当前点击的数字到10部分的字体设置为黑色
          },
          handleClick(item) {
            console.log(item);
            this.bgStyle = { width: item * 30 + 'px'};
            this.selectedNumber = item; // 把当前点击数字赋值给selectedNumber
          }
        }
      })
    </script>
  </body>
</html>