一、效果图
二、组件代码
<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";
}