vue聊天室已读未读的小圆圈占比

 <!-- 百分比记录已读未读 -->
                <i
                  style="margin-bottom: 10px; margin-right: 10px"
                  v-if="message.createBy == userId"
                  @click="ReadUn(message, index, $event)"
                >
                  <el-progress
                    type="circle"
                    :width="12"
                    :percentage="sumReads(message.reads)"
                    :stroke-width="5"
                    color="#06B49C"
                    slot="reference"
                  >
                  </el-progress>
                </i>

要记得把中间的百分比数字隐藏，加个样式：

::v-deep .el-progress__text { //可以去控制台选中这个百分比的类名；

  display: none;

}

//计算属性计算百分比占比

computed: {
  // 计算多少人已读
    sumReads() {
      //已读的人/总的人-1 *100
      return (reads) =>