uniapp 打分评分组件简介及如何修改图标

追格官方小助手/ 2022年04月05日/ 小程序/ 浏览 3723

uniapp提供了很多扩展组件,使用很方便。

今天来看一下打分评分组件:https://ext.dcloud.net.cn/plugin?name=uni-rate

使用很简单,如下所示:

<!-- 需要在 script 中绑定 value 变量 -->
<uni-rate v-model="value" @change="onChange"/>

<!-- 不支持滑动手势选择评分 -->
<uni-rate :touchable="false" :value="5"/>
<!-- 设置尺寸大小 -->
<uni-rate :size="18" :value="5"/>

<!-- 设置评分数 -->
<uni-rate :max="10" :value="5" />
	
<!-- 设置星星间隔 -->
<uni-rate :value="4" :margin="20" />	

<!-- 设置颜色 -->
<uni-rate :value="3" color="#bbb" active-color="red" />

<!-- 选择半星 -->
<uni-rate allow-half :value="3.5" />

<!-- 只读状态 -->
<uni-rate :readonly="true" :value="2" />

<!-- 禁用状态 -->
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />

<!-- 未选中的星星为镂空状态 -->
<uni-rate :value="3" :is-fill="false" />




功能很强大,使用很方便!

如果我们想个性话一点,不使用五星,想使用其它图标,怎么办呢?

直接在uni-rate组件源码中,修改成自己想要的图标就可以了!

当然,如果想更好的实现这个功能,就是给这个组件添加一个属性,把图标类型传进去。



发表评论

暂无评论,抢个沙发...

客服 工单