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

news/2025/2/13 18:20:36/

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

http://www.ppmy.cn/news/744290.html

相关文章

问卷星图片自动提取小程序

在摄影比赛征稿的时候&#xff0c;发现收到的excel汇总中图片是用链接的形式给出的&#xff0c;非常不方便&#xff0c;尤其是人比较多的时候也懒得一个个下载&#xff0c;所以写了一个小程序自动把这些图片按照顺序分文件夹下载好&#xff0c;以下内容均可按照注释自行修改~ …

最高可达100倍压缩!钒星北斗开放平台:渐进式图片压缩库,实现北斗三号RDSS短报文图片传输

在北斗三号系统的服务区域扩展到全球&#xff0c;RDSS服务性能和容量相对北斗二号大幅提升的背景下&#xff0c;我们研究了基于北斗三号 RDSS链路的语音图像传输技术&#xff0c;可以弥补传统通信系统覆盖能力弱&#xff0c;以及当前阶段我国卫星通信能力相对不足的缺陷。相较于…

A星寻路算法详解(C++实现 完整代码+图片演示 )

文章目录 三种寻路算法 A星寻路算法A星寻路算法思想A星寻路准备A星寻路过程&#xff08;图例&#xff09;A星寻路代码&#xff08;完整&#xff09; 三种寻路算法 深度寻路算法&#xff1a;不一定能找到最佳路径&#xff0c;但是寻路快速&#xff0c;只能走直线。广度寻路算法…

J2EE集合框架List

目录 一.UML ①集合类图 ②线下教育平台用例图 二.List集合特点 ①学集合框架就是了解容器的数据结构&#xff08;增删改查&#xff09; ②有序的 可重复的 三.遍历方式 ① foreach ② iterator 迭代器 ③ for 四.LinkedList ①对比ArrayList是数据结构 Linkedlist…

【Android】根据图片url使用Dialog显示大图预览

要在Android开发中实现点击图片传递图片URL&#xff0c;并通过Dialog显示图片预览大图并实现双指放大效果&#xff0c;你可以按照以下步骤进行操作&#xff1a; 在你的布局文件中&#xff0c;添加一个ImageView控件用于显示缩略图。例如&#xff1a;第三方库Zoomage来实现可缩…

华为手机备份app从内部恢复

操作步骤&#xff1a; 删除备份app&#xff08;删除途径&#xff0c;1.在设置内的应用管理&#xff0c;点击右上角的点&#xff0c;点击显示系统程序&#xff0c;打开备份&#xff0c;点击卸载删除2.在应用市场 我的 中找到安装管理&#xff0c;找到已安装中的 “备份” 软件&a…

手动备份安卓手机的基本流程

换新手机或者刷机时&#xff0c;如何手动将旧手机像素级克隆&#xff08;本文不涉及ROOT、钛备份等操作&#xff09; 1、打开文件管理&#xff0c;迁移图片、视频、文档等&#xff08;不要忘记保险柜文件&#xff09; 2、备份输入法剪切板&#xff0c;对桌面、下拉状态栏开关截…

android换机备份,安卓手机备份迁移指南

原标题&#xff1a;安卓手机备份迁移指南 买了新手机&#xff0c;本来是一件非常开心的事情&#xff0c;但是如何将旧手机上的有用信息转移到新手机上&#xff0c;这可是一件让大家很犯愁的事情&#xff0c;今天就跟着小编一起来看看安卓手机的四种转移数据的方法吧。 1、一键换…