<template>
    <docs-layout title="评分">
        <h2>概述</h2>
        <h3>网页星形评分组件。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {Rate} from 'vue-ydui/dist/lib.rem/rate';<br />/* 使用px：import {Rate} from 'vue-ydui/dist/lib.px/rate'; */<br /><br />Vue.component(Rate.name, Rate);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck cell-demo">
            <docs-demo title="普通使用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group title="普通使用"&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate1"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;值是: {{rate1}}&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate2"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;设置默认值&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" count="7" v-model="rate3"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;设置多个&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate4" color="#00FF16" activeColor="#0078D7"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;自定义颜色&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate5" size="18px"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;自定义大小&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate6" :readonly="true"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;只读&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                rate1: 0,<br />                rate2: 3,<br />                rate3: 2,<br />                rate4: 1,<br />                rate5: 4,<br />                rate6: 3<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-cell-group>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate1"></yd-rate>
                            <span slot="right">值是: {{rate1}}</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate2"></yd-rate>
                            <span slot="right">设置默认值</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" count="7" v-model="rate3"></yd-rate>
                            <span slot="right">设置多个</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate4" color="#00FF16" activeColor="#0078D7"></yd-rate>
                            <span slot="right">自定义颜色</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate5" size="18px"></yd-rate>
                            <span slot="right">自定义大小</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate6" :readonly="true"></yd-rate>
                            <span slot="right">只读</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>将 <span>yd-rate</span> 组件的 <span>v-model</span> 绑定到一个本地变量。</p>
                </div>
            </docs-demo>
            <docs-demo title="带提示文字">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate7" :showText="['很差','还行','一般','挺好','非常好']"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;提示文字&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-rate slot="left" v-model="rate8" :showText="tipText"&gt;&lt;/yd-rate&gt;<br />            &lt;span slot="right"&gt;HTML提示模板&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                rate7: 2,<br />                rate8: 1,<br />                tipText: [<br />                    '&lt;span style="color:red;"&gt;$ 分 - 很差&lt;/span&gt;',<br />                    '&lt;span style="color:blue;"&gt;$ 分 - 勉强&lt;/span&gt;',<br />                    '&lt;span style="color:green;"&gt;$ 分 - 一般&lt;/span&gt;',<br />                    '&lt;span style="color:black;"&gt;$ 分 - 挺好&lt;/span&gt;',<br />                    '&lt;span style="color:chartreuse;"&gt;$ 分 - 非常好&lt;/span&gt;'<br />                ]<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-cell-group>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate7" :showText="['很差','还行','一般','挺好','非常好']"></yd-rate>
                            <span slot="right">提示文字</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-rate slot="left" v-model="rate8" :showText="tipText"></yd-rate>
                            <span slot="right">HTML提示模板</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>通过设置 <span>yd-rate</span> 组件的 <span>showText</span> 自定义提示文字（支持HTML），<span>showText</span>为数组形式。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-rate</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>count</td>
                <td>星星个数</td>
                <td>Number</td>
                <td>-</td>
                <td>5</td>
            </tr>
            <tr>
                <td>size</td>
                <td>图标大小</td>
                <td>String</td>
                <td>-</td>
                <td>.5rem</td>
            </tr>
            <tr>
                <td>color</td>
                <td>初始颜色 && 常规颜色值</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>activeColor</td>
                <td>选中样式 && 常规颜色值</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>showText</td>
                <td>提示文字数组</td>
                <td>Array</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>readonly</td>
                <td>是否只读</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>padding</td>
                <td>两颗星星间的距离</td>
                <td>String</td>
                <td>-</td>
                <td>.06rem</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                rate1: 0,
                rate2: 3,
                rate3: 2,
                rate4: 1,
                rate5: 4,
                rate6: 3,
                rate7: 2,
                rate8: 1,
                tipText: [
                    '<span style="color:red;">$ 分 - 很差</span>',
                    '<span style="color:blue;">$ 分 - 勉强</span>',
                    '<span style="color:green;">$ 分 - 一般</span>',
                    '<span style="color:black;">$ 分 - 挺好</span>',
                    '<span style="color:chartreuse;">$ 分 - 非常好</span>'
                ]
            }
        }
    }
</script>
