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

在线预览地址: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 返回值为评分

你可能感兴趣的:(vue,组件,js功能,星星评分组件,rater)