elementui实现上下渐变星星

 实现如图所示效果

使用el-rate组件

<el-rate
    ref="rates"
    v-model="this.rating"
    disabled
    disabled-void-class
  >
  </el-rate>

手动控制星星颜色

  const lightStars = this.$refs.rates.$el.querySelectorAll(
      `.el-rate__item:nth-of-type(-n+${this.rating}) i`
    )
    const greyStars = this.$refs.rates.$el.querySelectorAll(
      `.el-rate__item:nth-of-type(-n+5) i`
    )
    for (let j = 0; j < this.rating; j++) {
      lightStars[j].style.background =
        'linear-gradient(to bottom, #fabb72 35%, #09a4c0 100%)'
      lightStars[j].style['-webkit-background-clip'] = 'text'
      lightStars[j].style['-webkit-text-fill-color'] = 'transparent'
    }
    const greyNum = 5 - this.rating
    for (let i = 0; i < greyNum; i++) {
      greyStars[this.rating + i].style.color = '#222744'
    }