add Rate

view-design · Jun 4, 2018 · b2bfb09 · b2bfb09
1 parent bddf9c7
commit b2bfb09
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 0 deletions.
diff --git a/src/code/rate.js b/src/code/rate.js
@@ -0,0 +1,89 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-rate": "../../dist/rate/index"
+}
+`;
+code.usage = `
+<i-cell-group>
+    <i-cell title="基本用法">
+        <i-rate 
+            bind:change="onChange1" 
+            value="{{starIndex1}}">
+        </i-rate>
+    </i-cell>
+    <i-cell title="自定义星星个数">
+        <i-rate 
+            count="{{10}}"
+            value="{{starIndex5}}">
+        </i-rate>
+    </i-cell>
+    <i-cell title="自定义星星大小">
+        <i-rate 
+            bind:change="onChange2" 
+            value="{{starIndex2}}" 
+            size="32">
+        </i-rate>
+    </i-cell>
+    <i-cell title="自定义文字说明">
+        <i-rate 
+            bind:change="onChange2" 
+            value="{{starIndex2}}">
+            {{starIndex2}}星
+        </i-rate>
+    </i-cell>
+     <i-cell title="手势touch选择星">
+        <i-rate 
+            bind:change="onChange3" 
+            value="{{starIndex3}}">
+            {{starIndex3}}星
+        </i-rate>
+    </i-cell>
+    <i-cell title="禁用点击和手势选择星">
+        <i-rate 
+            disabled="{{true}}"
+            value="{{starIndex4}}">
+            {{starIndex4}}星
+        </i-rate>
+    </i-cell>
+</i-cell-group>
+`;
+
+code.js = `
+Page({
+    data : {
+        starIndex1 : 0,
+        starIndex2 : 0,
+        starIndex3 : 0,
+        starIndex4 : 4,
+        starIndex5 : 5
+    },
+    onChange1(e){
+        const index = e.detail.index;
+        this.setData({
+            'starIndex1' : index
+        })
+    },
+    onChange2(e){
+        const index = e.detail.index;
+        this.setData({
+            'starIndex2' : index
+        })
+    },
+    onChange3(e){
+        const index = e.detail.index;
+        this.setData({
+            'starIndex3' : index
+        })
+    },
+    onChange5(e){
+        const index = e.detail.index;
+        this.setData({
+            'onChange5' : index
+        })
+    }
+});
+`;
+
+export default code;
diff --git a/src/router.js b/src/router.js
@@ -219,6 +219,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/switch.vue'], resolve)
     },
+    {
+        path: '/components/rate',
+        meta: {
+            title: '评分 Rate'
+        },
+        component: (resolve) => require(['./views/components/rate.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'

diff --git a/src/views/components/rate.vue b/src/views/components/rate.vue
@@ -0,0 +1,108 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Rate 评分</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>对事物进行快速的评级操作，或对评价进行展示。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Rate properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>count</td>
+                            <td>star 总数</td>
+                            <td>Number</td>
+                            <td>5</td>
+                        </tr>
+                        <tr>
+                            <td>value</td>
+                            <td>当前 star 数</td>
+                            <td>Number</td>
+                            <td>0</td>
+                        </tr>
+                        <tr>
+                            <td>disabled</td>
+                            <td>是否只读，无法进行交互</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>size</td>
+                            <td>图标大小，单位 px</td>
+                            <td>String</td>
+                            <td>20</td>
+                        </tr>
+                        <tr>
+                            <td>name</td>
+                            <td>隐藏的 input 的 name 值</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Rate events" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>事件名</th>
+                        <th>说明</th>
+                        <th>返回值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>bind:change</td>
+                        <td>点击评分时触发</td>
+                        <td>{ index }</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/rate';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>