| 1 |
- import{c as t,o as d,A as e}from"./vendor.27122b45.js";const a={class:"markdown-body"},r=e('<h1>Rate 评分</h1><h3>介绍</h3><p>用于快速的评级操作，或对评价进行展示。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Rate } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Rate);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><nut-rate \n v-model:value="state.val"\n>\n</nut-rate>\n</code></pre><h3>只读</h3><pre><code class="language-html"><nut-rate \n v-model:value="val"\n :readOnly="true"\n>\n</nut-rate>\n</code></pre><h3>绑定事件</h3><pre><code class="language-html"><nut-rate \n @click="onClick"\n>\n</nut-rate>\n</code></pre><h3>自定义尺寸</h3><pre><code class="language-html"><nut-rate \n :size="35"\n>\n</nut-rate>\n</code></pre><h3>自定义ICON</h3><pre><code class="language-html"><nut-rate\n :checkedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`"\n :uncheckedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`"\n></nut-rate>\n</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>total</td><td>star 总数</td><td>Number</td><td>5</td></tr><tr><td>value</td><td>当前 star 数，可使用 v-model 双向绑定数据</td><td>Number</td><td>0</td></tr><tr><td>size</td><td>star 大小</td><td>Number</td><td>25</td></tr><tr><td>spacing</td><td>两个star的间距</td><td>Number</td><td>20</td></tr><tr><td>read-only</td><td>是否只读</td><td>Boolean</td><td>false</td></tr><tr><td>unchecked-icon</td><td>使用图标(未选中)</td><td>String</td><td>-</td></tr><tr><td>checked-icon</td><td>使用图标(选中)</td><td>String</td><td>-</td></tr></tbody></table><h2>Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击star时触发</td><td>star的index</td></tr></tbody></table>',20),n={expose:[],setup:e=>(e,n)=>(d(),t("div",a,[r]))};export default n;
|
