Vue组件------star组件设计
何时使用 对评价进行展示
一 需求明确
实现一个star组件, 展示5个星, 支持 (全星, 半星, 空星), 支持 大小(24px, 36px, 48px)
一 问题分析
要展示5颗星,v-for
接口定义
图片定义
.star24_half .star36_half .star48_half
状态定义 .on 全星 .half 半星 .off 0星
二. 代码实现
<div class="star" :class="starType">
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
</div>
通过监听 starType 的样式, 控制星的大小
props: {
// 1.定义外部传递来的属性
size:{
// 尺寸
type:Number
},
score:{
// 展示得分
type:Number
}
},
starType() {
return star- + this.size;
},
.star
.star-item
&.star-48
&.star-36
&.star-24
参考文档
https://ant.design/components/rate-cn/
https://element.eleme.cn/#/zh-CN/component/rate
https://github.com/ElemeFE/element/blob/dev/packages/rate/src/main.vue
