vue自定义星星评分组件rater,可自定义星星图片,大小,暂不支持半颗星

介绍了一款可自定义星星和大小的星星评分组件,适用于多种场景,提供了详细的使用方法和属性说明,包括如何通过npm安装和在项目中引入组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在线预览地址: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;
}

属性说明:

属性类型描述
initWString非必填,评分组件初始化宽度,默认为100%
initHString非必填,评分组件初始化高度,默认为100%
starWString非必填,小星星初始化高度,默认为58rpx
starHString非必填,小星星初始化高度,默认为58rpx
onlyShowBoolean非必填,默认为false,即可进行评分,若为true则只显示不能进行评分操作
scoreNumber非必填,默认为0,值为显示的星星数量
starsArray非必填,默认为附件上的五颗星星,若需改变默认的星星,请自行传递对应数组的参数

事件说明:

事件参数描述
changeval返回值为评分
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值