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

Author: guoxiao158

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 2.2.2
+
+`2020-03-31`
+
+* :sparkles: feat(Video)：新增数据展示-视频组件 @vickyYE
+* :sparkles: feat(TimeLine)：新增时间轴组件 @yangxiaolu1993
+* :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`

README-zh_CN.md

@@ -11,7 +11,7 @@
 
 * 全新的架构
 * 50+ 高质量组件
-* 30+ 京东移动端项目正在使用
+* 40+ 京东移动端项目正在使用
 * 参照京东APP 7.0 视觉规范
 * 支持按需加载
 * 详尽的文档和示例

README.md

@@ -11,7 +11,7 @@ English | [简体中文](./README-zh_CN.md)
 
 * New structure
 * 50+ Reusable components
-* Used by 30+ JD mobile projects
+* Used by 40+ JD mobile projects
 * Refer to JD APP 7.0 visual specification
 * On-demand loading Support
 * Detailed documents and examples

docs/intro.md

@@ -15,7 +15,7 @@ NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web
 ## 特性
 
 * 50+ 高质量组件
-* 30+ 京东移动端项目正在使用
+* 40+ 京东移动端项目正在使用
 * 基于京东APP 7.0 视觉规范
 * 支持按需加载
 * 详尽的文档和示例

src/config.json

@@ -553,6 +553,26 @@
       "sort": "6",
       "showDemo": true,
       "author": "irisSong"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TimeLine",
+      "chnName": "时间轴",
+      "desc": "对一系列数据进行展示，垂直展示",
+      "type": "component",
+      "sort": "0",
+      "showDemo": true,
+      "author": "yangxiaolu"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TimeLineItem",
+      "chnName": "时间轴节点",
+      "desc": "定义时间轴节点",
+      "type": "component",
+      "sort": "0",
+      "showDemo": false,
+      "author": "yangxiaolu"
     }
   ]
 }

src/nutui.js

@@ -106,6 +106,10 @@ import Video from "./packages/video/index.js";
 import "./packages/video/video.scss";
 import Signature from "./packages/signature/index.js";
 import "./packages/signature/signature.scss";
+import TimeLine from "./packages/timeline/index.js";
+import "./packages/timeline/timeline.scss";
+import TimeLineItem from "./packages/timelineitem/index.js";
+import "./packages/timelineitem/timelineitem.scss";
 
 const packages = {
   Cell,
@@ -159,7 +163,9 @@ const packages = {
   TabSelect: TabSelect,
   LuckDraw: LuckDraw,
   Video: Video,
-  Signature: Signature
+  Signature: Signature,
+  TimeLine: TimeLine,
+  TimeLineItem: TimeLineItem
 };
 
 const components = {};

src/packages/avatar/avatar.scss

@@ -17,6 +17,7 @@
     .text{
         display: inline-block;
         width:100%;
+        height: 100%;
         text-align: center;
         overflow: hidden;
     }

src/packages/avatar/avatar.vue

@@ -47,7 +47,7 @@ export default {
     },
     methods: {
         activeAvatar(){
-            this.$emit('activeAvatar');
+            this.$emit('active-avatar');
         }
     }
 }

src/packages/avatar/demo.vue

@@ -15,11 +15,11 @@
     </div>
     <h4>修改背景色</h4>
     <div class="white-bg">
-      <nut-avatar bgcolor="#f0250f"></nut-avatar>
+      <nut-avatar bg-color="#f0250f"></nut-avatar>
     </div>
     <h4>可以修改头像的内容</h4>
     <div class="white-bg">
-      <nut-avatar size="large" bgIcon>U</nut-avatar>
+      <nut-avatar size="large" bg-icon>U</nut-avatar>
     </div>
     <h4>修改背景图片</h4>
     <div class="white-bg">
@@ -36,7 +36,7 @@
     </div>
     <h4>点击头像有触发事件</h4>
     <div class="white-bg">
-      <nut-avatar @activeAvatar="activeAvatar"></nut-avatar>
+      <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
     </div>
   </div>
 </template>

src/packages/avatar/doc.md

@@ -4,21 +4,6 @@
 
 ## 基本用法
 
-```html
-<nut-avatar></nut-avatar>
-```
-
-## 设置背景色
-
-```html
-<nut-avatar 
-    bgColor="#87d068"
-></nut-avatar>
-```
-
-
-## 设置大小
-
 内置 **smal** / **normal** / **large** 三种尺寸规格
 
 ```html
@@ -27,61 +12,60 @@
 <nut-avatar size="small"></nut-avatar>
 ```
 
-## 设置头像的形状类型
+## 修改形状类型
+
 ```html
-<nut-avatar 
-  shape="square"
-></nut-avatar>
+<nut-avatar size="large" shape="square"></nut-avatar>
+<nut-avatar size="normal" shape="square"></nut-avatar>
+<nut-avatar size="small" shape="square"></nut-avatar>
 ```
 
+## 修改背景色
+
+```html
+<nut-avatar bg-color="#f0250f"></nut-avatar>
+```
 
 ## 设置头像的文本内容
+
 ```html
-<nut-avatar 
-  :size="30"
-  bgIcon=""
->U</nut-avatar>
+<nut-avatar size="large" bg-icon>U</nut-avatar>
 ```
 
-## 设置头像背景图片
+## 设置背景图片
 ```html
-<nut-avatar 
-  bgIcon="" 
-  bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
->
-</nut-avatar>
+<nut-avatar
+  bg-icon
+  bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+></nut-avatar>
 ```
 
-## 设置头像Icon图标
+## 设置头像ICON图标
 ```html
 <nut-avatar
-  bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
->
-</nut-avatar>
+  bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
+></nut-avatar>
 ```
 
 ## 点击头像有触发事件
 ```html
-<nut-avatar 
-  @activeAvatar="activeAvatar"
->
-</nut-avatar>
+<nut-avatar @active-avatar="activeAvatar"></nut-avatar>
 ```
 
 
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| bgColor | 设置头像背景色 | String | #eee
+| bg-color | 设置头像背景色 | String | #eee
 | size | 设置头像的大小，提供三种：large /normal/small | String | normal
-| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | --
-| bgImage | 设置头像的背景图片 | String | --
-| bgIcon | 设置头像的icon图标 | String | --
+| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round
+| bg-image | 设置头像的背景图片 | String | --
+| bg-icon | 设置头像的icon图标 | String | --
 
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| activeAvatar | 点击头像触发事件 | -- 
+| active-avatar | 点击头像触发事件 | -- 

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 | 暂停时 | 剩余时间戳