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

src/config.json

@@ -556,13 +556,13 @@
     },
     {
       "version": "1.0.0",
-      "name": "TimeLine",
-      "chnName": "时间轴",
-      "desc": "对一系列数据进行展示，垂直展示",
+      "name": "CircleProgress",
+      "chnName": "圆形进度条",
+      "desc": "显示当前任务的操作进度",
       "type": "component",
-      "sort": "0",
+      "sort": "2",
       "showDemo": true,
-      "author": "yangxiaolu"
+      "author": "zyf"
     },
     {
       "version": "1.0.0",

src/nutui.js

@@ -106,6 +106,8 @@ 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 CircleProgress from "./packages/circleprogress/index.js";
+import "./packages/circleprogress/circleprogress.scss";
 import TimeLine from "./packages/timeline/index.js";
 import "./packages/timeline/timeline.scss";
 import TimeLineItem from "./packages/timelineitem/index.js";
@@ -164,6 +166,7 @@ const packages = {
   LuckDraw: LuckDraw,
   Video: Video,
   Signature: Signature,
+  CircleProgress: CircleProgress,
   TimeLine: TimeLine,
   TimeLineItem: TimeLineItem
 };

src/packages/circleprogress/circleprogress.scss

@@ -0,0 +1,9 @@
+.nut-circleprogress{
+    position: relative;
+    .nut-circleprogress-content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+}

src/packages/circleprogress/circleprogress.vue

@@ -0,0 +1,85 @@
+<template>
+<div class="nut-circleprogress" :style="{height:option.size + 'px' , width:option.size + 'px'}">
+  <svg
+    :height="option.size"
+    :width="option.size"
+    x-mlns="http://www.w3.org/200/svg"
+  >
+    <circle
+      :r="option.radius"
+      :cx="option.cx"
+      :cy="option.cy"
+      :stroke="option.backColor"
+      :stroke-width="option.strokeOutWidth"
+      fill="none"
+    />
+    <circle
+      :r="option.radius"
+      :cx="option.cx"
+      :cy="option.cy"
+      :stroke="option.progressColor"
+      :stroke-dasharray="arcLength"
+      :stroke-width="strokeInnerWidth"
+      fill="none"
+      transform="rotate(-90)"
+      transform-origin="center"
+      stroke-linecap="round"
+      style="transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"
+    />
+  </svg>
+  <div class="nut-circleprogress-content">
+    <template v-if="!isAuto"><slot>{{progress}}%</slot></template>
+    <template v-else><slot></slot></template>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'nut-circleprogress',
+  props: {
+    progress: {
+      type: [Number , String ] ,
+      required: true,
+    },
+    strokeInnerWidth: {
+      type: [Number , String ] ,
+      default:10
+    },
+    isAuto: {
+      tyep: Boolean,
+      default:false
+    },
+    progressOption: {
+      type: Object,
+      default: () => { },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    
+    arcLength () {
+      let circleLength = Math.floor(2 * Math.PI * this.option.radius)
+      let progressLength = (this.progress) / 100 * circleLength
+      // console.log(this.progress,progressLength)
+      return `${progressLength},${circleLength}`
+    },
+    option () {
+      // 所有进度条的可配置项
+      let baseOption = {
+        radius: 50,
+        strokeOutWidth: 10,
+        backColor: '#d9d9d9',
+        progressColor: 'red'
+      }
+      Object.assign(baseOption, this.progressOption)
+      // 圆心位置自动生成
+      baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth
+      baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2
+      return baseOption
+    },
+  },
+}
+</script>

src/packages/circleprogress/demo.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="demo-list">
+    <p>基本用法</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="10">
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>环形进度条自定义样式</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="50" :progressOption="progressOption" >
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>环形进度条自定义内容</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="50" :isAuto="isAuto">
+            <slot>自定义</slot>
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>动态改变环形进度条的进度</p>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-circleprogress :progress="percent"  :progressOption="progressOption" :strokeInnerWidth="strokeInnerWidth">
+            
+          </nut-circleprogress>
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title">
+          <nut-button type="default" shape="circle" @click="setReduceVal" small>减少</nut-button>
+          <nut-button type="red" shape="circle" @click="setAddVal" small>增加</nut-button>
+        </span>
+      </nut-cell>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+     return {
+        progressOption : {
+          radius: 50,
+          strokeOutWidth:10,
+          backColor: '#d9d9d9',
+          progressColor: 'red',
+        },
+        percent:50, 
+        strokeInnerWidth:10,
+        isAuto:true
+    }
+  },
+  methods: {
+    setAddVal() {
+      this.strokeInnerWidth = 10
+      if(this.percent  >= 100 ) {
+        return
+      }
+      this.percent += 10;
+    },
+    setReduceVal() {
+      if (this.percent - 10 <= 0) {
+        this.strokeInnerWidth = 0
+        this.percent = 0 
+        return;
+      }
+      this.percent -= 10;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/circleprogress/doc.md

@@ -0,0 +1,35 @@
+## CirecleProgress 环形进度条
+
+显示任务的当前操作进度。
+
+## 基本用法
+
+```html
+    
+    <nut-circleprogress progress="10">
+    </nut-circleprogress>
+```
+## 环形进度条自定义样式
+
+```htmL
+    
+    <nut-circleprogress progress="50" :progressOption="progressOption">
+    </nut-circleprogress>
+```
+
+## 环形进度条自定义内容
+
+```htmL
+    
+    <nut-circleprogress progress="50" :isAuto="true">
+    </nut-circleprogress>
+```
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | -----
+| progress | 百分比 | Number,String | 必传项，无默认值
+| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
+| isAuto | 是否自定义内容显示 | Boolean | false
+| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}

src/packages/circleprogress/index.js

@@ -0,0 +1,8 @@
+import CircleProgress from './circleprogress.vue';
+import './circleprogress.scss';
+
+CircleProgress.install = function(Vue) {
+  Vue.component(CircleProgress.name, CircleProgress);
+};
+
+export default CircleProgress

src/packages/infiniteloading/doc.md

@@ -16,7 +16,7 @@
             class="list-item" 
             v-for="(item, index) of data" 
             :key="item"
-        >我是测试数据{{index + 1}}</li>
+        >我是测试数据{{index + 1} }</li>
     </ul>
 </nut-infiniteloading>
 ```
@@ -57,13 +57,17 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
-| hasMore | 是否还有更多数据 | Boolean | true
-| isLoading | 是否加载中 | Boolean | false
+| has-more | 是否还有更多数据 | Boolean | true
+| is-loading | 是否加载中 | Boolean | false
 | threshold | 距离底部多远加载 | Number | 200
-| isShowMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false
+| is-showMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false
+| use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true
+| use-capture | 是否使用捕获模式 true捕获 false冒泡 | Boolean | false
+| unload-more-txt | 没有更多数据展示文案 | String | 哎呀，这里是底部了啦
 
 ## Event
 
 | 字段 | 说明 | 回调参数
 |----- | ----- | -----
 | loadmore | 继续加载的回调函数 | -
+| scrollChange | 实时监听滚动高度 | 滚动高度

src/packages/infiniteloading/infiniteloading.vue

@@ -10,7 +10,7 @@
                 <template v-if="isLoading" >
                    <i class="loading-hint"></i><span class="loading-txt">加载中...</span>
                 </template>
-                <span v-else-if="!hasMore" class="tips-txt">哎呀，这里是底部了啦</span>
+                <span v-else-if="!hasMore" class="tips-txt">{{unloadMoreTxt}}</span>
             </div>
         </div>
     </div>
@@ -35,9 +35,20 @@ export default {
             type: Boolean,
             default: true
         },
+        useCapture: {
+            type: Boolean,
+            default: false
+        },
         isShowMod: {
             type: Boolean,
             default: false
+        },
+        unloadMoreTxt: {
+            type: String,
+            default: "哎呀，这里是底部了啦"
+        },
+        scrollChange:{
+            type:Function
         }
     },
     data() {
@@ -51,6 +62,12 @@ export default {
     },
 
     mounted: function () {
+        const parentElement = this.getParentElement(this.$el);
+        let scrollEl = window;
+        if (this.useWindow === false) {
+            scrollEl = parentElement;
+        }
+        this.scrollEl = scrollEl;
         this.scrollListener();
     },
 
@@ -69,10 +86,12 @@ export default {
             this.diffX = endX - this.startX;
             this.diffY = endY - this.startY;
         },
-
+         getParentElement(el) {
+            return el && el.parentNode;
+        },
         scrollListener() {
-            window.addEventListener('scroll', this.handleScroll, false);
-            window.addEventListener('resize', this.handleScroll, false);
+            this.scrollEl.addEventListener('scroll', this.handleScroll, this.useCapture);
+            window.addEventListener('resize', this.handleScroll, this.useCapture);
         },
 
         requestAniFrame() {
@@ -88,7 +107,7 @@ export default {
 
         handleScroll() {
             this.requestAniFrame()(() => {
-                if (!this.hasMore || !this.isScrollAtBottom() || this.isLoading || !this.isShowMod) {
+                if (!this.isScrollAtBottom() || !this.hasMore || this.isLoading || !this.isShowMod) {
                     return false;
                 } else {
                     this.$emit('loadmore');
@@ -113,7 +132,10 @@ export default {
         isScrollAtBottom() {
             let offsetDistance;
             
+            let resScrollTop = 0;
+
             const windowScrollTop = this.getWindowScrollTop();
+
             if (this.useWindow) {
                 offsetDistance =
                     this.calculateTopPosition(this.$refs.scroller) +
@@ -124,10 +146,12 @@ export default {
                     scrollHeight,
                     clientHeight,
                     scrollTop
-                } = this.$refs.scroller;
+                } = this.scrollEl;
+
                 offsetDistance = scrollHeight - clientHeight - scrollTop;
+                resScrollTop = scrollTop;
             }
-            
+            this.$emit('scrollChange',this.useWindow?windowScrollTop :resScrollTop);
             // 保证是往下滑动的
             let beforeScrollTop = this.beforeScrollTop;
             this.beforeScrollTop = windowScrollTop;
@@ -145,13 +169,13 @@ export default {
 
     deactivated() {
         this.keepAlive = true;
-        window.removeEventListener('scroll', this.handleScroll, false);
-        window.removeEventListener('resize', this.handleScroll, false);
+        this.scrollEl.removeEventListener('scroll', this.handleScroll, this.useCapture);
+        window.removeEventListener('resize', this.handleScroll, this.useCapture);
     },
 
     destroyed() {
-        window.removeEventListener('scroll', this.handleScroll, false);
-        window.removeEventListener('resize', this.handleScroll, false);
+        this.scrollEl.removeEventListener('scroll', this.handleScroll, this.useCapture);
+        window.removeEventListener('resize', this.handleScroll, this.useCapture);
     }
 }
 </script>

types/nutui.d.ts

@@ -72,5 +72,6 @@ export declare class Popup extends UIComponent {}
 export declare class LuckDraw extends UIComponent {}
 export declare class Video extends UIComponent {}
 export declare class Signature extends UIComponent {}
+export declare class CircleProgress extends UIComponent {}
 export declare class TimeLine extends UIComponent {}
 export declare class TimeLineItem extends UIComponent {}