js-components-basic-rating.md

# rating<a name="ZH-CN_TOPIC_0000001173324645"></a>

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

## 权限列表<a name="section11257113618419"></a>

无

## 子组件<a name="section9288143101012"></a>

不支持。

## 属性<a name="section2907183951110"></a>

除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.18%" id="mcps1.1.6.1.1"><p id="aa872998ac2d84843a3c5161889afffef"><a name="aa872998ac2d84843a3c5161889afffef"></a><a name="aa872998ac2d84843a3c5161889afffef"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="13.66%" id="mcps1.1.6.1.2"><p id="ab2111648ee0e4f6d881be8954e7acaab"><a name="ab2111648ee0e4f6d881be8954e7acaab"></a><a name="ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="9.46%" id="mcps1.1.6.1.3"><p id="ab377d1c90900478ea4ecab51e9a058af"><a name="ab377d1c90900478ea4ecab51e9a058af"></a><a name="ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="9.22%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="44.48%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row5141051050"><td class="cellrowborder" valign="top" width="23.18%" headers="mcps1.1.6.1.1 "><p id="p157381413961"><a name="p157381413961"></a><a name="p157381413961"></a>numstars</p>
</td>
<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.6.1.2 "><p id="p973881313619"><a name="p973881313619"></a><a name="p973881313619"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="9.46%" headers="mcps1.1.6.1.3 "><p id="p1973871314616"><a name="p1973871314616"></a><a name="p1973871314616"></a>5</p>
</td>
<td class="cellrowborder" valign="top" width="9.22%" headers="mcps1.1.6.1.4 "><p id="p473891317617"><a name="p473891317617"></a><a name="p473891317617"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="44.48%" headers="mcps1.1.6.1.5 "><p id="p173811138611"><a name="p173811138611"></a><a name="p173811138611"></a>设置评分条的星级总数。</p>
</td>
</tr>
<tr id="row11475954"><td class="cellrowborder" valign="top" width="23.18%" headers="mcps1.1.6.1.1 "><p id="p1973821316618"><a name="p1973821316618"></a><a name="p1973821316618"></a>rating</p>
</td>
<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.6.1.2 "><p id="p19738131320620"><a name="p19738131320620"></a><a name="p19738131320620"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="9.46%" headers="mcps1.1.6.1.3 "><p id="p07386135610"><a name="p07386135610"></a><a name="p07386135610"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="9.22%" headers="mcps1.1.6.1.4 "><p id="p1673831319613"><a name="p1673831319613"></a><a name="p1673831319613"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="44.48%" headers="mcps1.1.6.1.5 "><p id="p107382131366"><a name="p107382131366"></a><a name="p107382131366"></a>设置评分条当前评星数。</p>
</td>
</tr>
<tr id="row1372245811411"><td class="cellrowborder" valign="top" width="23.18%" headers="mcps1.1.6.1.1 "><p id="p5738101319611"><a name="p5738101319611"></a><a name="p5738101319611"></a>stepsize</p>
</td>
<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.6.1.2 "><p id="p77381713261"><a name="p77381713261"></a><a name="p77381713261"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="9.46%" headers="mcps1.1.6.1.3 "><p id="p1073831312620"><a name="p1073831312620"></a><a name="p1073831312620"></a>0.5</p>
</td>
<td class="cellrowborder" valign="top" width="9.22%" headers="mcps1.1.6.1.4 "><p id="p5738613465"><a name="p5738613465"></a><a name="p5738613465"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="44.48%" headers="mcps1.1.6.1.5 "><p id="p27381813364"><a name="p27381813364"></a><a name="p27381813364"></a>设置评分条的评星步长。</p>
<div class="note" id="note1249472985312"><a name="note1249472985312"></a><a name="note1249472985312"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="p749462910531"><a name="p749462910531"></a><a name="p749462910531"></a>仅手机和平板设备支持</p>
</div></div>
</td>
</tr>
<tr id="row192599563412"><td class="cellrowborder" valign="top" width="23.18%" headers="mcps1.1.6.1.1 "><p id="p16738813966"><a name="p16738813966"></a><a name="p16738813966"></a>indicator</p>
</td>
<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.6.1.2 "><p id="p47381313769"><a name="p47381313769"></a><a name="p47381313769"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="9.46%" headers="mcps1.1.6.1.3 "><p id="p1273815131861"><a name="p1273815131861"></a><a name="p1273815131861"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="9.22%" headers="mcps1.1.6.1.4 "><p id="p1073912131165"><a name="p1073912131165"></a><a name="p1073912131165"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="44.48%" headers="mcps1.1.6.1.5 "><p id="p87391131166"><a name="p87391131166"></a><a name="p87391131166"></a>设置评分条是否作为一个指示器，此时用户不可操作。</p>
</td>
</tr>
</tbody>
</table>

## 样式<a name="section5775351116"></a>

除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：

<a name="table179091550174914"></a>
<table><thead align="left"><tr id="row1190955064913"><th class="cellrowborder" valign="top" width="20.71792820717928%" id="mcps1.1.6.1.1"><p id="p119091450154913"><a name="p119091450154913"></a><a name="p119091450154913"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="20.80791920807919%" id="mcps1.1.6.1.2"><p id="p390945020497"><a name="p390945020497"></a><a name="p390945020497"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.93890610938906%" id="mcps1.1.6.1.3"><p id="p2090917504493"><a name="p2090917504493"></a><a name="p2090917504493"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="p189091750114910"><a name="p189091750114910"></a><a name="p189091750114910"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="p79091750124917"><a name="p79091750124917"></a><a name="p79091750124917"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row17909450124912"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p790935084914"><a name="p790935084914"></a><a name="p790935084914"></a>star-background</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p129091350164920"><a name="p129091350164920"></a><a name="p129091350164920"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p99099503496"><a name="p99099503496"></a><a name="p99099503496"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p1909125019497"><a name="p1909125019497"></a><a name="p1909125019497"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p79091050184910"><a name="p79091050184910"></a><a name="p79091050184910"></a>设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。</p>
</td>
</tr>
<tr id="row139092504495"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p19909185044919"><a name="p19909185044919"></a><a name="p19909185044919"></a>star-foreground</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p18909145064913"><a name="p18909145064913"></a><a name="p18909145064913"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p11909550204915"><a name="p11909550204915"></a><a name="p11909550204915"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p99101508497"><a name="p99101508497"></a><a name="p99101508497"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p1091015502499"><a name="p1091015502499"></a><a name="p1091015502499"></a>设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。</p>
</td>
</tr>
<tr id="row15910185012492"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p2910145018491"><a name="p2910145018491"></a><a name="p2910145018491"></a>star-secondary</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p16910145024916"><a name="p16910145024916"></a><a name="p16910145024916"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p7910125064915"><a name="p7910125064915"></a><a name="p7910125064915"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p8910150204910"><a name="p8910150204910"></a><a name="p8910150204910"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p391095015494"><a name="p391095015494"></a><a name="p391095015494"></a>设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。</p>
</td>
</tr>
<tr id="row12910155014493"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p7910135054915"><a name="p7910135054915"></a><a name="p7910135054915"></a>width</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p69101950104910"><a name="p69101950104910"></a><a name="p69101950104910"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p391015084913"><a name="p391015084913"></a><a name="p391015084913"></a>120px</p>
<p id="p1391055012499"><a name="p1391055012499"></a><a name="p1391055012499"></a>60px（不可操作）</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p13910125064911"><a name="p13910125064911"></a><a name="p13910125064911"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p1591035014911"><a name="p1591035014911"></a><a name="p1591035014911"></a>默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。</p>
</td>
</tr>
<tr id="row79101550124915"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p1591005054915"><a name="p1591005054915"></a><a name="p1591005054915"></a>height</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p2091095024920"><a name="p2091095024920"></a><a name="p2091095024920"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p20910155014915"><a name="p20910155014915"></a><a name="p20910155014915"></a>24px</p>
<p id="p29101650104920"><a name="p29101650104920"></a><a name="p29101650104920"></a>12px（不可操作）</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p491055024914"><a name="p491055024914"></a><a name="p491055024914"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p1491065074910"><a name="p1491065074910"></a><a name="p1491065074910"></a>默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。</p>
</td>
</tr>
<tr id="row791012500491"><td class="cellrowborder" valign="top" width="20.71792820717928%" headers="mcps1.1.6.1.1 "><p id="p29108504492"><a name="p29108504492"></a><a name="p29108504492"></a>rtl-flip</p>
</td>
<td class="cellrowborder" valign="top" width="20.80791920807919%" headers="mcps1.1.6.1.2 "><p id="p109107509490"><a name="p109107509490"></a><a name="p109107509490"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.93890610938906%" headers="mcps1.1.6.1.3 "><p id="p391065018494"><a name="p391065018494"></a><a name="p391065018494"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p1891015034920"><a name="p1891015034920"></a><a name="p1891015034920"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p391011508492"><a name="p391011508492"></a><a name="p391011508492"></a>在RTL文字方向下是否自动翻转图源。</p>
</td>
</tr>
</tbody>
</table>

>![](../../public_sys-resources/icon-note.gif) **说明：** 
>star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。

## 事件<a name="section124498406719"></a>

除支持[通用事件](js-components-common-events.md)外，还支持如下事件：

<a name="table836435619510"></a>
<table><thead align="left"><tr id="row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="a426b8903842d48fa8012a24ff3c997eb"><a name="a426b8903842d48fa8012a24ff3c997eb"></a><a name="a426b8903842d48fa8012a24ff3c997eb"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="22.48224822482248%" id="mcps1.1.4.1.2"><p id="a53448ba47e5e4ae9bf7774c90820e970"><a name="a53448ba47e5e4ae9bf7774c90820e970"></a><a name="a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="52.665266526652665%" id="mcps1.1.4.1.3"><p id="add489ff50c444f24b759162c7f4bad9a"><a name="add489ff50c444f24b759162c7f4bad9a"></a><a name="add489ff50c444f24b759162c7f4bad9a"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row518915212082"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p125587286811"><a name="p125587286811"></a><a name="p125587286811"></a>change</p>
</td>
<td class="cellrowborder" valign="top" width="22.48224822482248%" headers="mcps1.1.4.1.2 "><p id="p255820281687"><a name="p255820281687"></a><a name="p255820281687"></a>{ rating:  number }</p>
</td>
<td class="cellrowborder" valign="top" width="52.665266526652665%" headers="mcps1.1.4.1.3 "><p id="p10558228886"><a name="p10558228886"></a><a name="p10558228886"></a>评分条的评星发生改变时触发该回调。</p>
</td>
</tr>
</tbody>
</table>

## 方法<a name="section2279124532420"></a>

支持[通用方法](js-components-common-methods.md)。

## 示例<a name="section1715414253487"></a>

```
<!-- 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
        });
    }
}
```

![](figures/zh-cn_image_0000001198670487.png)