el-rate结合iconfont实现性别占比

一、效果图

二、组件代码

<template>
  <div class="sex-prop-box">
    <div class="sex-item" v-for="(item,index) in sexData" :key="index">
      <span>{{item.label}}</span>
      <el-rate
        v-model="item.value"
        disabled
        text-color="#fff"
        disabled-void-color="#563a3c"
        :max="10"
        :icon-classes="item.iconClasses"
        :disabled-void-icon-class="item.disabledIconClass">
      </el-rate>
      <span>
        {{item.realVal}}
      </span>
    </div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sexData: [
          {
            label: "男",
            value: 3.5,
            realVal: "35%",
            iconClasses:['icon-nan iconfont', 'icon-nan iconfont', 'icon-nan iconfont'],
            disabledIconClass: "icon-nan iconfont"
          },
          {
            label: "女",
            value: 7,
            realVal: "70%",
            iconClasses:['icon-nv iconfont', 'icon-nv iconfont', 'icon-nv iconfont'],
            disabledIconClass: "icon-nv iconfont"
          }
        ]
      }
    },
  }
</script>

<style lang="less" scoped>
@import '~@/assets/icon/iconfont.css';
.sex-prop-box{
  background-color: #0d1b32;
  .sex-item {
    display: flex;
    align-items: center;
    &>span {
      color: #fff;
    }
  }
}
</style>

三、特殊字体文件

iconfont.css文件内容

@font-face {
  font-family: "iconfont";
  src:  url('iconfont.ttf?t=1659073754779') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-nan:before {
  content: "\e6a6";
}

.icon-nv:before {
  content: "\e6a7";
}

补充：
1.查看el-rate了解用法
2.阿里巴巴矢量图标库获取iconfont字体