组件的说明
评分组件,多用于购买商品后,对商品进行评价等场景。
实现效果:
错误代码
<view class="bot-left">
<uni-rate activeColor="#FC9233" size="42rpx" v-model="rateValue" @change="onChange"/>
<text class="rote">{{ rateValue }}.0</text>
</view>
像上边提供的代码的话,会导致鼠标划过或者点击的时候不会触发onChange是事件。
错误原因
由于uni-rate组件的size属性的值类型为number,但是上述代码使用的是字符串,因此不符合组件的使用规则,因此会导致@change事件失效。
正确写法
<view class="bot-left">
<uni-rate activeColor="#FC9233" size="42" v-model="rateValue" />
<text class="rote">{{ rateValue }}.0</text>
</view>
注意:
由于size只能是数字,且默认为px,所以不能设置为响应式的,希望官方能改进一下。
如果有谁有解决方案,还请发在评论区借鉴一下。