update

sites/demo/app.js

@@ -69,7 +69,7 @@ OfflinePluginRuntime.install({
     console.log('PWA缓存有更新，需要刷新页面');
 
     app.$dialog({
-      title: "您正在浏览的页面有更新，请刷新",
+      title: "当前页面有新版本，请刷新",
       noCloseBtn: true,
       noOkBtn: true,
       cancelBtnTxt: "刷新页面",

sites/demo/app.vue

@@ -51,7 +51,6 @@ h4 {
   box-sizing: border-box;
 }
 .demo {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding:0 8px 20px 8px;
 }
 </style>

sites/demo/view/index.vue

@@ -16,6 +16,7 @@
             <a :href="'./demo.html#/'+cpt.name">
               {{cpt.name}}
               <span>{{cpt.chnName}}</span>
+              <nut-rate class="cpt-rec" v-if="cpt.star" :total="5" :value="cpt.star" :size="8" :spacing="3" :readOnly="true"></nut-rate>
             </a>
           </li>
         </template>
@@ -151,12 +152,13 @@ export default {
     border-top: 1px solid #edeef1;
     border-radius: 2px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-11 0h30v30h-30z'/%3E%3Cpath d='M7.757 15C5.241 10.755 2.727 6.51.21 2.266A1.5 1.5 0 0 1 2.79.736l8 13.499c.28.472.28 1.058 0 1.53l-8 13.5a1.499 1.499 0 1 1-2.58-1.53L7.757 15z' fill='rgb(132,132,132)' /%3E%3C/g%3E%3C/svg%3E")
-      no-repeat right 15px center;
+      no-repeat right 10px center;
     background-size: 10px 10px;
     a {
-      display: block;
+      display: flex;
+      align-items:center;
       height: 100%;
-      padding: 20px;
+      padding: 20px 10px 20px 10px;
       text-decoration: none;
       color: #2e2d2d;
     }
@@ -176,7 +178,10 @@ li {
   margin: 0;
   padding: 0;
 }
-
+.cpt-rec{
+  display:inline-flex;
+  margin-left:5px;
+}
 @-webkit-keyframes swing {
   from {
     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

src/config.json

@@ -26,6 +26,7 @@
       "type": "method",
       "showDemo": true,
       "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
+      "star": 5,
       "author": "Frans"
     },
     {
@@ -46,6 +47,7 @@
       "desc": "轻提示。",
       "type": "method",
       "showDemo": true,
+      "star": 4,
       "author": "Frans"
     },
     {
@@ -56,6 +58,7 @@
       "desc": "从底部弹出的动作菜单面板。",
       "type": "component",
       "showDemo": true,
+      "star": 5,
       "author": "iris"
     },
     {
@@ -66,6 +69,7 @@
       "desc": "常用于平级区域大块内容的的收纳和展现。",
       "type": "component",
       "showDemo": true,
+      "star": 3,
       "author": "甄玉磊"
     },
     {
@@ -86,6 +90,7 @@
       "desc": "用于不同模块以之间的切换",
       "type": "component",
       "showDemo": true,
+      "star": 3,
       "author": "甄玉磊"
     },
     {
@@ -96,6 +101,7 @@
       "desc": "日历",
       "type": "component",
       "showDemo": true,
+      "star": 5,
       "author": "iris"
     },
     {
@@ -106,6 +112,7 @@
       "desc": "日期选择",
       "type": "component",
       "showDemo": true,
+      "star": 5,
       "author": "iris"
     },
     {
@@ -129,6 +136,16 @@
       "author": "wangyue"
     },
     {
+      "name": "Switch",
+      "version": "1.0.0",
+      "sort": "1",
+      "chnName": "开关",
+      "type": "component",
+      "showDemo": true,
+      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
+      "author": "Frans"
+    },
+    {
       "version": "1.0.0",
       "name": "Slider",
       "sort": "1",
@@ -136,6 +153,7 @@
       "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。",
       "type": "component",
       "showDemo": true,
+      "star": 4,
       "author": "Frans"
     },
     {
@@ -146,6 +164,7 @@
       "desc": "区间选择器组件",
       "type": "component",
       "showDemo": true,
+      "star": 4,
       "author": "famanoder"
     },
     {
@@ -156,6 +175,7 @@
       "desc": "提供多个选项集合供用户选择其中一项。",
       "type": "component",
       "showDemo": true,
+      "star": 5,
       "author": "iris"
     },
     {
@@ -246,6 +266,7 @@
       "desc": "用于快速的评级操作，或对评价进行展示。",
       "type": "component",
       "showDemo": true,
+      "star": 4,
       "author": "永无止晋"
     },
     {
@@ -256,6 +277,7 @@
       "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
       "type": "component",
       "showDemo": true,
+      "star": 5,
       "author": "wangnan31"
     },
     {
@@ -276,6 +298,7 @@
       "type": "component",
       "sort": "1",
       "showDemo": true,
+      "star": 3,
       "author": "famanoder"
     },
     {
@@ -309,16 +332,6 @@
       "author": "苏子刚"
     },
     {
-      "name": "Switch",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "开关",
-      "type": "component",
-      "showDemo": true,
-      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
-      "author": "Frans"
-    },
-    {
       "name": "Radio",
       "version": "1.0.0",
       "sort": "1",

src/packages/rate/demo.vue

@@ -10,13 +10,13 @@
             </nut-cell>
         </div>
 
-        <h4>事件</h4>
+        <h4>只读</h4>
         <div>
             <nut-cell>
-                <span slot="title"><nut-rate @click="onClick"></nut-rate></span>
+                <span slot="title"><nut-rate v-model="val2" :readOnly="true"></nut-rate></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">结果：{{result}}</span>
+                <span slot="title">结果：{{val2}}</span>
             </nut-cell>
         </div>
 
@@ -24,11 +24,21 @@
         <div>
             <nut-cell>
                 <span slot="title"><nut-rate
-                :size="35"
+                :size="30"
                 ></nut-rate></span>
             </nut-cell>
         </div>
 
+        <h4>事件</h4>
+        <div>
+            <nut-cell>
+                <span slot="title"><nut-rate @click="onClick"></nut-rate></span>
+            </nut-cell>
+            <nut-cell>
+                <span slot="title">结果：{{result}}</span>
+            </nut-cell>
+        </div>
+
         <h4>自定义ICON</h4>
         <div>
             <nut-cell>
@@ -38,6 +48,7 @@
                 ></nut-rate></span>
             </nut-cell>
         </div>
+        
     </div>
 </template>
 
@@ -46,7 +57,9 @@ export default {
     data(){
         return{
             val:4,
+            val2:2,
             result:'',
+            result2:'',
             icon1:`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")`,
             icon2:`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")`
         }
@@ -55,6 +68,9 @@ export default {
     methods:{
         onClick(idx){
             this.result = '您点击了第'+idx+'个!';
+        },
+        onClick2(idx){
+            this.result2 = '您点击了第'+idx+'个!';
         }
     }
 }

src/packages/rate/doc.md

@@ -5,10 +5,22 @@
 ## 基础用法
 
 ```html
-<nut-rate>
+<nut-rate 
+    v-model="val"
+>
 </nut-rate>
 ```
 
+只读
+```html
+<nut-rate 
+    v-model="val"
+    :readOnly="true"
+>
+</nut-rate>
+```
+
+
 绑定事件
 
 ```html
@@ -41,13 +53,14 @@
 | 字段 | 说明 | 类型 | 默认值
 | ----- | ----- | ----- | -----
 | total | star 总数 | Number | 5
-| value | 当前 star 数，可以使用 v-model 双向绑定数据 | Number | 3
+| value | 当前 star 数，可使用 v-model 双向绑定数据 | Number | 3
 | size | star 大小 | Number | 25
 | spacing | 两个star的间距 | Number | 20
+| readOnly | 是否只读 | Boolean | false
 | uncheckedIcon | 使用图标(未选中) | String | -
 | checkedIcon | 使用图标(选中) | String | -
 
 ## Event
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| click | 点击star市触发 | star的index
+| click | 点击star时触发 | star的index

src/packages/rate/rate.vue

@@ -38,9 +38,9 @@ export default {
             type:String,
             default:null
         },
-        testProp:{
-            type:String,
-            default:null
+        readOnly:{
+            type:Boolean,
+            default: false
         },
         spacing:{
             type:[String,Number],
@@ -57,9 +57,14 @@ export default {
     },
     methods: {
         onClick($event,idx){
-            this.current = idx;
-            this.$emit('input',idx);
-            this.$emit('click',idx);
+            if(this.readOnly){
+                this.$emit('input',this.current);
+                this.$emit('click',this.current);
+            }else{
+                this.current = idx;
+                this.$emit('input',idx);
+                this.$emit('click',idx);
+            }
         }
     }
 }