uni-app 评论五星

我就是我 2021-11-10 07:26 418阅读 0赞

下载  组件  uni-rate

在script中引入：

import uniRate from "@/components/uni-rate/uni-rate.vue"
    export default {
        components: {uniRate}
    }

基本用法 ：

<uni-rate value="2"></uni-rate>

自定义星星大小：

<uni-rate size="18" value="5"></uni-rate>

设置评分数：

<uni-rate max="10" value="5"></uni-rate>

不可点击状态：

<uni-rate disabled="true" value="3.5"></uni-rate>

**属性说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>当前评分</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>Number</td> 
   <td>5</td> 
   <td>最大的评分</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>Number</td> 
   <td>24</td> 
   <td>星星的大小</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>星星的间距</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>String</td> 
   <td>#ececec</td> 
   <td>星星的颜色</td> 
  </tr> 
  <tr> 
   <td>active-color</td> 
   <td>String</td> 
   <td>#ffca3e</td> 
   <td>选中状态的星星的颜色</td> 
  </tr> 
  <tr> 
   <td>is-fill</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>星星的类型，是否为实心类型</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否为不可点击状态</td> 
  </tr> 
 </tbody> 
</table>

**事件说明：**

<table> 
 <thead> 
  <tr> 
   <th>事件称名</th> 
   <th>说明</th> 
   <th>返回参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>Rate 的 value 改变时触发事件，返回参数为Rate的value</td> 
   <td>{value:Number}</td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，418人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现服务五星好评

五星好评 ![鼠标滑动确定][20191024143915999.png] html部分 <!DOCTYPE html> <html lang="en

客官°小女子只卖身不卖艺/ 2023年05月31日 10:08/ 0 赞/ 52 阅读

相关 Vue封装五星好评

![在这里插入图片描述][20210103103532825.png] 图标下载： ![在这里插入图片描述][20210115094400842.png] ![在这里

客官°小女子只卖身不卖艺/ 2023年01月01日 13:56/ 0 赞/ 154 阅读

相关 jquery实现五星好评

css: <style> ul > li > i.iconfont{ font-size: 20px;

约定不等于承诺〃/ 2022年09月14日 09:07/ 0 赞/ 134 阅读

相关 vue实现发布评论、评论管理

功能要求 1. 实现发布评论功能 2. 实现评论列表的展示 3. 使用 tab 栏切换的方式来实现

Bertha 。/ 2022年08月28日 04:41/ 0 赞/ 192 阅读

相关历届试题五星填数

如【图1.png】的五星图案节点填上数字：1~12，除去7和11。要求每条直线上数字和相等。 [![图1][1]][1_1] 如图就是恰当的填法。请你利用计算机搜

Dear 丶/ 2022年07月12日 10:49/ 0 赞/ 153 阅读

相关 jQuery五星好评界面反馈界面

![Center][] 星星：![Center 1][]![Center 2][]![Center 3][] jQuery五星好评界面反馈界面

忘是亡心i/ 2022年06月12日 01:43/ 0 赞/ 184 阅读

相关用JavaScript制作五星好评

用JavaScript制作五星好评开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/1/19 大家好！我今天要给大家分享

男娘i/ 2022年03月25日 08:09/ 0 赞/ 264 阅读

相关 uni-app 评论五星

下载组件 uni-rate 在script中引入： import uniRate from "@/components/uni-rate/un

我就是我/ 2021年11月10日 07:26/ 0 赞/ 419 阅读

相关 JavaScript实现商品评价五星好评

一.效果展示 ![在这里插入图片描述][20190818170216603.gif] 二.代码实现 1.html代码 <!DOCTYPE html>

亦凉/ 2021年10月30日 00:30/ 0 赞/ 265 阅读

相关重构-五星评分

动画: 移入到某个星星位置,之前的星星高亮变大,后面的星星暗色不变实现: 动画: (1)通过一个索引,索引值为-1,每

柔情只为你懂/ 2021年07月24日 21:11/ 0 赞/ 381 阅读