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

owl_wp

已于 2022-07-13 20:15:32 修改

阅读量215

点赞数

文章标签： vue.js elementui javascript

于 2022-07-13 19:41:16 首次发布

本文链接：https://blog.csdn.net/owl_wp/article/details/125770987

版权

使用Vue.js结合ElementUI，通过Progress组件创建聊天室已读未读状态的小圆圈。通过自定义样式隐藏百分比数字，并介绍了相关计算方法和组件属性设置。

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

 <!-- 百分比记录已读未读 -->
                <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: n