ソースを参照

upd: progress 文档说明修改

richard1015 5 年 前
コミット
a41adbb4d7
4 ファイル変更39 行追加32 行削除
  1. 1 1
      sites/doc/app.vue
  2. 8 8
      src/config.json
  3. 17 10
      src/packages/progress/demo.vue
  4. 13 13
      src/packages/progress/doc.md

+ 1 - 1
sites/doc/app.vue

@@ -66,7 +66,7 @@
         </div>
       </div>
       <div class="foot">
-        Copyright © 2018~2019
+        Copyright © 2018~2020
         <a href="//jdc.jd.com" target="_blank">JDC</a>-
         <a target="_blank" href="javascript:;">前端开发部</a>
       </div>

+ 8 - 8
src/config.json

@@ -17,7 +17,7 @@
       "type": "component",
       "showDemo": true,
       "desc": "列表项,可组合成列表",
-      "author": "Frans"
+      "author": "Frans、玉磊"
     },
     {
       "name": "Dialog",
@@ -28,7 +28,7 @@
       "showDemo": true,
       "desc": "模态弹窗,支持按钮交互,支持图片弹窗。",
       "star": 5,
-      "author": "Frans"
+      "author": "Frans、肖晓"
     },
     {
       "name": "Icon",
@@ -49,7 +49,7 @@
       "type": "method",
       "showDemo": true,
       "star": 4,
-      "author": "Frans"
+      "author": "Frans、张宇"
     },
     {
       "version": "1.0.0",
@@ -207,7 +207,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": true,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -217,7 +217,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": false,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -227,7 +227,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": false,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -411,7 +411,7 @@
       "type": "component",
       "sort": "2",
       "showDemo": true,
-      "author": "永无止晋"
+      "author": "永无止晋、richard1015"
     },
     {
       "version": "1.0.0",
@@ -472,7 +472,7 @@
       "type": "component",
       "sort": "0",
       "showDemo": true,
-      "author": "zhuzhida"
+      "author": "richard1015"
     },
     {
       "version": "1.0.0",

+ 17 - 10
src/packages/progress/demo.vue

@@ -5,7 +5,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" strokeColor="#8e71c7"/>
+          <nut-progress percentage="30" stroke-color="#8e71c7"/>
         </span>
       </nut-cell>
     </div>
@@ -13,7 +13,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :showText="false" strokeWidth="24"/>
+          <nut-progress percentage="50" :show-text="false" stroke-width="24"/>
         </span>
       </nut-cell>
     </div>
@@ -29,7 +29,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="60" :textInside="true"/>
+          <nut-progress percentage="60" :text-inside="true"/>
         </span>
       </nut-cell>
     </div>
@@ -37,7 +37,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" :textInside="true" size="small">
+          <nut-progress percentage="30" :text-inside="true" :size="size">
             <slot>
               <span>small</span>
             </slot>
@@ -46,7 +46,7 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :textInside="true" size="base">
+          <nut-progress percentage="50" :text-inside="true" size="base">
             <slot>
               <span>base</span>
             </slot>
@@ -55,7 +55,7 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="70" :textInside="true" size="large">
+          <nut-progress percentage="70" :text-inside="true" size="large">
             <slot>
               <span>large</span>
             </slot>
@@ -67,17 +67,17 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" strokeColor="#1890ff" status="active"/>
+          <nut-progress percentage="30" stroke-color="#1890ff" status="active"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" strokeWidth="15" status="wrong"/>
+          <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="100" strokeColor="#1890ff" strokeWidth="15" status="success"/>
+          <nut-progress percentage="100" stroke-color="#1890ff" stroke-width="15" status="success"/>
         </span>
       </nut-cell>
     </div>
@@ -102,9 +102,16 @@
 export default {
   data() {
     return {
-      val: 0
+      val: 0,
+      strokeWidth:15,
+      size:'small'
     };
   },
+  mounted(){
+    setTimeout(() => {
+      this.size='large';
+    }, 3000);
+  },
   methods: {
     setAddVal() {
       if (this.val >= 100) {

+ 13 - 13
src/packages/progress/doc.md

@@ -15,8 +15,8 @@
 ```html
 <nut-progress
     percentage="30"
-    strokeColor="#8e71c7" 
-    strokeWidth="12"
+    stroke-color="#8e71c7" 
+    stroke-width="12"
 >
 </nut-progress>
 ```
@@ -25,7 +25,7 @@
 ```html
 <nut-progress 
     percentage="50"
-    :showText="false"
+    :show-text="false"
 >
 </nut-progress>
 ```
@@ -34,8 +34,8 @@
 ```html
 <nut-progress 
     percentage="60" 
-    :textInside="true" 
-    strokeWidth="24"
+    :text-inside="true" 
+    stroke-width="24"
 ></nut-progress>
 ```
 设置状态显示
@@ -43,20 +43,20 @@
 ```html
 <nut-progress 
     percentage="30" 
-    strokeColor="#f30" 
+    stroke-color="#f30" 
     status="active"
 >
 </nut-progress>
 <nut-progress 
     percentage="50"
-    strokeColor="#f30"
-    strokeWidth="15"
+    stroke-color="#f30"
+    stroke-width="15"
     status="wrong"
 >
 </nut-progress>
 <nut-progress 
     percentage="100" 
-    :strokeWidth="15" 
+    :stroke-width="15" 
     status="success"
 >
 </nut-progress>
@@ -85,9 +85,9 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | percentage | 百分比 | Number | 0
-| strokeColor | 进度条背景色 | String | #1890ff
-| strokeWidth | 进度条高度 | String | ''
+| stroke-color | 进度条背景色 | String | #1890ff
+| stroke-width | 进度条高度 | String | ''
 | size | 进度条及文字尺寸,可选值small/base/large | String | -
-| showText | 是否显示进度条文字内容 | Boolean | true
-| textInside | 进度条文字显示位置 | Boolean | false
+| show-text | 是否显示进度条文字内容 | Boolean | true
+| text-inside | 进度条文字显示位置 | Boolean | false
 | status | 进度条当前状态,可选值text/active/wrong/success | String | text