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

6 篇文章 0 订阅
5 篇文章 0 订阅

在线预览地址: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返回值为评分
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值