个人技术分享

组件的说明

评分组件，多用于购买商品后，对商品进行评价等场景。

实现效果：

错误代码

<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，所以不能设置为响应式的，希望官方能改进一下。

如果有谁有解决方案，还请发在评论区借鉴一下。