基本组件-rating

最新推荐文章于 2024-08-15 23:45:38 发布

阿巴~阿巴

最新推荐文章于 2024-08-15 23:45:38 发布

阅读量128

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_62236091/article/details/124898074

版权

本文详细解读了评分条组件的各个属性，包括星级总数、当前评星数和步长设置，以及如何通过样式调整其在不同设备上的显示效果。同时提供了HTML示例代码和JavaScript事件处理，帮助开发者更好地理解和应用评分条来收集用户反馈。

摘要由CSDN通过智能技术生成

rating

评分条，表示用户使用感受的衡量标准条。

属性

名称	类型	默认值	必填	描述
numstars	number	5	否	设置评分条的星级总数。
rating	number	0	否	设置评分条当前评星数。
stepsize	number	0.5	否	设置评分条的评星步长。

样式

名称	类型	默认值	必填	描述
width	<length>\|<percentage>	手机：120px 智慧屏：360px 60px（不可操作）	否	默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。
height	<length>\|<percentage>	手机：24px 智慧屏：72px 12px（不可操作）	否	默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

名称

类型

默认值

必填

描述

width

手机：120px

智慧屏：360px

60px（不可操作）

否

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。

height

手机：24px

智慧屏：72px

12px（不可操作）

否

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

示例代码

<!-- xxx.hml -->
<div class="container">
  <rating numstars="5" rating="5" @change="changeRating" id="rating">
  </rating>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
rating {
  width: 200px;
}

// xxx.js
import prompt from '@system.prompt';
export default {
    changeRating(e){
        prompt.showToast({
            message: e.rating
        });
    }
}