在线预览地址:https://wenyuming.github.io/w-demos/dist/index.html#/rater
鉴于第三方ui库的星星评分组件星星基本上是固定,不能自定义,使用起来可能不是都适用,所以封装了一个可以自定义星星和大小的星星评分组件,能用的上的就可以用用咯,源码在包里面有,对您有帮助的话就留下您的留言,使用过程中有问题也可以反馈一下,感谢各位的到来!需要小程序星星评分组件的可以参照我上一篇博客,上面有。
请在移动端模式下预览。
用法:
npm i w-rater -s / yarn add w-rater
html:
<rater class="diy-box" :score="4"></rater>
js:
import rater from 'w-rater'export default {name: 'rateDemo',components: {rater},data () {return {}}}
style:
.diy-box {display: inline-block;width:100%;height:50px;text-align:center;
}
属性说明:
属性 | 类型 | 描述 |
---|---|---|
initW | String | 非必填,评分组件初始化宽度,默认为100% |
initH | String | 非必填,评分组件初始化高度,默认为100% |
starW | String | 非必填,小星星初始化高度,默认为58rpx |
starH | String | 非必填,小星星初始化高度,默认为58rpx |
onlyShow | Boolean | 非必填,默认为false,即可进行评分,若为true则只显示不能进行评分操作 |
score | Number | 非必填,默认为0,值为显示的星星数量 |
stars | Array | 非必填,默认为附件上的五颗星星,若需改变默认的星星,请自行传递对应数组的参数 |
事件说明:
事件 | 参数 | 描述 |
---|---|---|
change | val | 返回值为评分 |