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自定义星星评分组件rater，可自定义星星图片，大小，暂不支持半颗星相关推荐

豆瓣评分小程序星星评分组件
豆瓣评分小程序星星评分组件评分功能:小星星,多处使用,所以抽出成为component组件,然后在需要使用的页面按需注册导入 1.1,新建component名为stars 1.2,然后按需在页面注册 ...
进阶篇之纯css 字体实现五角星（半颗星）评分
1.前言之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体 css实现! ...
评价打分组件，SVG 半颗星的解决方案！
作者:KUMAR HARSH 译者:前端小智来源:blog 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq4 ...
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
css简单实现五角星评分.点赞收藏.展示评分(半颗星.1/3颗星) 1. 前言之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后 ...
JAVA做一个五星评论打分字体,css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）...
1.前言javascript 以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来.总以为这样的话没有进步,没有把知识放进 ...
微信小程序-星星评分组件（支持半星/自定义尺寸）
由于从网上直接copy的评分组件虽然能用,但是我找到的组件渲染做得稍差,于是准备自己改进一下. 先放一个效果图: 一.准备准备类似的四张图片,图片一定要根据像素点精准对半切开,否则在小程序中会出现重 ...
html 星星遮罩,vue 星星评分组件
评分插件在购物的应用中经常可以看得到,但是用着别人的总是没有自己写的顺手,正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件,功能没有写全效果图.gif 主体结构: .scoreLa ...
Vue - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于 Vue.js / Nuxt.js 的表情图片满意度评价功能(评分组件), ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

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

vue自定义星星评分组件rater，可自定义星星图片，大小，暂不支持半颗星相关推荐

最新文章

热门文章