Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

CHANGELOG.md

@@ -1,3 +1,25 @@
+## 2.2.2
+
+`2020-03-31`
+
+* :sparkles: feat(Video)：新增数据展示-视频组件 @vickyYE
+* :sparkles: feat(Signature)：新增业务类型-签名组件 @irisSong
+* :sparkles: upd(TabSelect)：新增确认按钮回调事件 @yi-ge
+* :sparkles: upd(TextBox)：新增v-model属性 @yi-ge
+* :sparkles: upd(Stepper)：新增超出最小、最大回调事件 @richard1015
+* :sparkles: upd(ActionSheet)：优化内部代码，文档优化 @irisSong
+* :sparkles: upd(Flex)：优化内部代码，文档优化 @szg2008
+* :sparkles: upd(Toast)：优化内部代码，文档优化 @zy19940510
+* :sparkles: upd(Progress)：优化内部代码，文档优化 @layman666
+* :sparkles: upd(SearchBar、TextInput)：组件优化 @yangxiaolu1993
+* :bug: upd(Range)：绑定的值无法更新到组件 #227 @undo03
+* :bug: upd(Countdown)：修复异步计算属性无法更新组件 #228 @undo03
+* :bug: upd(LuckDraw)：抽奖组件图片链接修复 @Ymm0008
+* :bug: upd(Picker)优化自定义数据联动demo @irisSong
+* :bug: upd(Popup)：按需加载icon修复 @yangkaixuan
+* :bug: upd(TabSelect)：组件tabList数据改变内容不刷新问题修复 @dushoujun
+* :bug: upd(TabBar)：更新数据 重新渲染的功能 @zhenyulei
+
 ## 2.2.1
 
 `2020-03-09`

src/packages/backtop/backtop.vue

@@ -123,6 +123,7 @@ export default {
       this.isAnimation && this.duration > 0
         ? this.scrollAnimation()
         : this.scroll();
+      this.$emit("click");
     },
     scrollAnimation() {
       const self = this;
@@ -133,7 +134,7 @@ export default {
         var y = (t * -self.scrollTop) / self.duration + self.scrollTop;
         self.scroll(y);
         cid = self.requestAniFrame()(fn);
-        if (t == self.duration) {
+        if (t == self.duration || y == 0) {
           window.cancelAnimationFrame(cid);
         }
       });

src/packages/countdown/countdown.vue

@@ -119,6 +119,9 @@ const countdownTimer = {
         this.p += (this.getTimeStamp() - this._curr);
         this.$emit('on-restart', this.restTime);
       }
+    },
+    endTime() {
+      this.initTimer();
     }
   },
   methods: {
@@ -127,29 +130,32 @@ const countdownTimer = {
       let t = timeStr;
       t = t > 0? +t: t.toString().replace(/\-/g, '/');
       return new Date(t).getTime();
+    },
+    initTimer() {
+      const delay = 1000;
+      const curr = Date.now();
+      const start = this.getTimeStamp(this.startTime || curr);
+      const end = this.getTimeStamp(this.endTime || curr);
+      const diffTime = curr - start;
+
+      this.restTime = end - (start + diffTime);
+      this.timer = setInterval(() => {
+        if(!this.paused) {
+          let restTime = end - (Date.now() - this.p + diffTime);
+          this.restTime = restTime;
+          if(restTime < delay) {
+            this.restTime = 0;
+            this.$emit('on-end');
+            clearInterval(this.timer);
+          }
+        }else{
+          // 暂停
+        }
+      }, delay);
     }
   },
   created() {
-    const delay = 1000;
-    const curr = Date.now();
-    const start = this.getTimeStamp(this.startTime || curr);
-    const end = this.getTimeStamp(this.endTime || curr);
-    const diffTime = curr - start;
-
-    this.restTime = end - (start + diffTime);
-    this.timer = setInterval(() => {
-      if(!this.paused) {
-        let restTime = end - (Date.now() - this.p + diffTime);
-        this.restTime = restTime;
-        if(restTime < delay) {
-          this.restTime = 0;
-          this.$emit('on-end');
-          clearInterval(this.timer);
-        }
-      }else{
-        // 暂停
-      }
-    }, delay);
+    this.initTimer();
   }
 }
 countdownTimer.restTime = restTime;

src/packages/countdown/demo.vue

@@ -24,6 +24,12 @@
           <nut-countdown slot="title" showDays showPlainText :endTime="end" />
         </nut-cell>
       </div>
+      <h4>异步更新结束时间</h4>
+      <div>
+        <nut-cell>
+          <nut-countdown slot="title" showPlainText :endTime="asyncEnd" />
+        </nut-cell>
+      </div>
       <h4>控制开始和暂停的倒计时</h4>
       <div>
         <nut-cell>
@@ -50,6 +56,7 @@ export default {
     return {
       serverTime: Date.now() - 30 * 1000,
       end: Date.now() + 50 * 1000,
+      asyncEnd: 0,
       paused: false
     };
   },
@@ -66,6 +73,11 @@ export default {
     onrestart(v) {
       console.log('restart: ', v);
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.asyncEnd = Date.now() + 30 * 1000
+    }, 3000)
   }
 };
 </script>

src/packages/countdown/doc.md

@@ -41,6 +41,17 @@
 </nut-countdown>
 ```
 
+异步更新结束时间
+
+```html
+<nut-countdown 
+    showDays 
+    showPlainText 
+    :endTime="asyncEnd" 
+>
+</nut-countdown>
+```
+
 控制开始和暂停的倒计时
 
 ```html
@@ -65,7 +76,7 @@
 ## Event
 
 | 字段 | 说明 | 回调参数
-| ----- | ----- | ----- | -----
+| ----- | ----- | ----- 
 | on-end | 倒计时结束时 | 剩余时间戳
 | on-paused | 暂停时 | 剩余时间戳
 | on-restart | 暂停时 | 剩余时间戳

src/packages/popup/demo.vue

@@ -1,130 +1,137 @@
 <template>
   <div>
     <h2 class="title">基本用法</h2>
-    <nut-cell
-      isLink
-      title="展示弹出层"
-      :showIcon="true"
-      @click.native="showBasic = true"
-    >
-    </nut-cell>
+    <div>
+        <nut-cell
+        isLink
+        title="展示弹出层"
+        :showIcon="true"
+        @click.native="showBasic = true"
+        >
+        </nut-cell>
+    </div>
     <nut-popup :style="{ padding: '30px 50px' }"   v-model="showBasic" >正文</nut-popup>
 
     <h2 class="title">弹出位置</h2>
-
-    <nut-cell
-      isLink
-      title="顶部弹出"
-      :showIcon="true"
-      @click.native="showTop = true"
-    >
-    </nut-cell>
-    <nut-popup position="top" v-model="showTop" :style="{ height: '20%' }">
-    </nut-popup>
-    <nut-cell
-      isLink
-      title="底部弹出"
-      :showIcon="true"
-      @click.native="showBottom = true"
-    >
-    </nut-cell>
-    <nut-popup
-      v-model="showBottom"
-      position="bottom"
-      :style="{ height: '20%' }"
-    >
-    </nut-popup>
-    <nut-cell
-      isLink
-      title="左侧弹出"
-      :showIcon="true"
-      @click.native="showLeft = true"
-    >
-    </nut-cell>
-    <nut-popup
-      :style="{ width: '20%', height: '100%' }"
-      v-model="showLeft"
-      position="left"
-    ></nut-popup>
-    <nut-cell
-      isLink
-      title="右侧弹出"
-      :showIcon="true"
-      @click.native="showRight = true"
-    >
-    </nut-cell>
-    <nut-popup
-      position="right"
-      v-model="showRight"
-      :style="{ width: '20%', height: '100%' }"
-    ></nut-popup>
+    <div>
+        <nut-cell
+        isLink
+        title="顶部弹出"
+        :showIcon="true"
+        @click.native="showTop = true"
+        >
+        </nut-cell>
+        <nut-popup position="top" v-model="showTop" :style="{ height: '20%' }">
+        </nut-popup>
+        <nut-cell
+        isLink
+        title="底部弹出"
+        :showIcon="true"
+        @click.native="showBottom = true"
+        >
+        </nut-cell>
+        <nut-popup
+        v-model="showBottom"
+        position="bottom"
+        :style="{ height: '20%' }"
+        >
+        </nut-popup>
+        <nut-cell
+        isLink
+        title="左侧弹出"
+        :showIcon="true"
+        @click.native="showLeft = true"
+        >
+        </nut-cell>
+        <nut-popup
+        :style="{ width: '20%', height: '100%' }"
+        v-model="showLeft"
+        position="left"
+        ></nut-popup>
+        <nut-cell
+        isLink
+        title="右侧弹出"
+        :showIcon="true"
+        @click.native="showRight = true"
+        >
+        </nut-cell>
+        <nut-popup
+        position="right"
+        v-model="showRight"
+        :style="{ width: '20%', height: '100%' }"
+        ></nut-popup>
+    </div>
     <h2 class="title">关闭图标</h2>
-    <nut-cell
-      isLink
-      title="关闭图标"
-      :showIcon="true"
-      @click.native="showIcon = true">
-    </nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable 
-      v-model="showIcon"
-      :style="{ height: '20%' }"
-    ></nut-popup>
-
-    <nut-cell
-      isLink
-      title="图标位置"
-      :showIcon="true"
-      @click.native="showIconPosition = true">
-    </nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable 
-      close-icon-position="top-left"
-      v-model="showIconPosition"
-      :style="{ height: '20%' }"
-    ></nut-popup>
+    <div>
+        <nut-cell
+        isLink
+        title="关闭图标"
+        :showIcon="true"
+        @click.native="showIcon = true">
+        </nut-cell>
+        <nut-popup
+        position="bottom"
+        closeable 
+        v-model="showIcon"
+        :style="{ height: '20%' }"
+        ></nut-popup>
 
+        <nut-cell
+        isLink
+        title="图标位置"
+        :showIcon="true"
+        @click.native="showIconPosition = true">
+        </nut-cell>
+        <nut-popup
+        position="bottom"
+        closeable 
+        close-icon-position="top-left"
+        v-model="showIconPosition"
+        :style="{ height: '20%' }"
+        ></nut-popup>
 
-    <nut-cell
-      isLink
-      title="自定义图标"
-      :showIcon="true"
-      @click.native="showCloseIcon = true">
-    </nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable 
-      close-icon="tick"
-      v-model="showCloseIcon"
-      :style="{ height: '20%' }"
-    ></nut-popup>
 
+        <nut-cell
+        isLink
+        title="自定义图标"
+        :showIcon="true"
+        @click.native="showCloseIcon = true">
+        </nut-cell>
+        <nut-popup
+        position="bottom"
+        closeable 
+        close-icon="tick"
+        v-model="showCloseIcon"
+        :style="{ height: '20%' }"
+        ></nut-popup>
+    </div>
 
     <h2 class="title">圆角弹框</h2>
-    <nut-cell
-      isLink
-      title="圆角弹框"
-      :showIcon="true"
-      @click.native="showRound = true"
-    >
-    </nut-cell>
-    <nut-popup
-      round
-      v-model="showRound"
-      position="bottom"
-      :style="{ height: '20%' }"
-    ></nut-popup>
-
+    <div>
+        <nut-cell
+        isLink
+        title="圆角弹框"
+        :showIcon="true"
+        @click.native="showRound = true"
+        >
+        </nut-cell>
+        <nut-popup
+        round
+        v-model="showRound"
+        position="bottom"
+        :style="{ height: '20%' }"
+        ></nut-popup>
+    </div>
     <h2 class="title">指定挂载节点</h2>
-    <nut-cell
-      isLink
-      title="指定挂载节点"
-      :showIcon="true"
-      @click.native="getContainer = true"
-    >
-    </nut-cell>
+    <div>
+        <nut-cell
+        isLink
+        title="指定挂载节点"
+        :showIcon="true"
+        @click.native="getContainer = true"
+        >
+        </nut-cell>
+    </div>
     <nut-popup :style="{ padding: '30px 50px' }"  get-container="body"  v-model="getContainer" >body</nut-popup>
   </div>
 </template>

src/packages/progress/demo.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="demo-list">
     <h4>基本用法</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-progress percentage="30" />
+        </span>
+      </nut-cell>
+    </div>
+
     <p>线形进度条-设置颜色高度</p>
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" stroke-color="pink" text-color="red"/>
+          <nut-progress percentage="30" stroke-color="pink"  stroke-width="20" text-color="red"/>
         </span>
       </nut-cell>
     </div>
@@ -72,12 +80,12 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :stroke-height="strokeHeight" status="wrong"/>
+          <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="100" stroke-color="#1890ff" stroke-height="15" status="success"/>
+          <nut-progress percentage="100" stroke-color="#1890ff" stroke-width="15" status="success"/>
         </span>
       </nut-cell>
     </div>
@@ -103,15 +111,10 @@ export default {
   data() {
     return {
       val: 0,
-      strokeHeight:15,
+      strokeWidth:15,
       size:'small'
     };
   },
-  mounted(){
-    setTimeout(() => {
-      this.size='large';
-    }, 3000);
-  },
   methods: {
     setAddVal() {
       if (this.val >= 100) {

src/packages/progress/doc.md

@@ -15,8 +15,8 @@
 ```html
 <nut-progress
     percentage="30"
-    stroke-color="#8e71c7" 
-    stroke-height="12"
+    stroke-color="pink" 
+    stroke-width="20"
 >
 </nut-progress>
 ```
@@ -45,7 +45,7 @@
 <nut-progress 
     percentage="60" 
     :text-inside="true" 
-    stroke-height="24"
+    stroke-width="24"
 ></nut-progress>
 ```
 
@@ -55,14 +55,20 @@
 ```html
 <nut-progress 
     size="small"
+    percentage="30" 
+    text-inside="true" 
 >
 </nut-progress>
 <nut-progress
     size="base"
+    percentage="50" 
+    text-inside="true" 
 >
 </nut-progress>
 <nut-progress 
     size="large"
+    percentage="70" 
+    text-inside="true" 
 >
 </nut-progress>
 ```
@@ -71,20 +77,21 @@
 ```html
 <nut-progress 
     percentage="30" 
-    stroke-color="#f30" 
+    stroke-color="#1890ff" 
     status="active"
 >
 </nut-progress>
 <nut-progress 
     percentage="50"
     stroke-color="#f30"
-    stroke-height="15"
+    stroke-width="15"
     status="wrong"
 >
 </nut-progress>
 <nut-progress 
     percentage="100" 
-    :stroke-height="15" 
+    stroke-color="#1890ff" 
+    :stroke-width="15" 
     status="success"
 >
 </nut-progress>
@@ -98,7 +105,7 @@
 |----- | ----- | ----- | -----
 | percentage | 百分比 | Number | 0
 | stroke-color | 进度条背景色 | String | #f30
-| stroke-height | 进度条宽度 | String | ''
+| stroke-width | 进度条宽度 | String | ''
 | size | 进度条及文字尺寸，可选值small/base/large | String | -
 | show-text | 是否显示进度条文字内容 | Boolean | true
 | text-inside | 进度条文字显示位置(false:外显，true:内显) | Boolean | false

src/packages/progress/progress.vue

@@ -35,7 +35,7 @@ export default {
             type: String,
             default: 'text'
         },
-        strokeHeight: {
+        strokeWidth: {
             type:[Number,String],
             default: ''
         },
@@ -53,12 +53,12 @@ export default {
         },
         textColor: {
             tyep: String,
-            default: '#333'
+            default: ''
         }
     },
     data() {
         return {
-            height:this.strokeHeight+'px'
+            height:this.strokeWidth+'px'
         }
     },
     computed:{