Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

docs/examples-docs/swipe.md

@@ -12,6 +12,16 @@
 }
 </style>
 
+<script>
+export default {
+  methods: {
+    handlePageEnd(page, index) {
+      console.log(page, index);
+    }
+  }
+};
+</script>
+
 ## Swipe 轮播
 
 ### 基础用法
@@ -33,7 +43,7 @@
 
 :::demo 自动轮播
 ```html
-<zan-swipe :auto-play="true">
+<zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
   <zan-swipe-item>
     <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
@@ -43,3 +53,16 @@
 </zan-swipe>
 ```
 :::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| autoPlay | 是否自动轮播 | `boolean`  |    `false`     |    `true`, `false`      |
+| showIndicators | 是否显示指示器 | `boolean`  |   `true`       |   `true`, `false`       |
+
+### 事件
+
+| 事件名       | 说明      | 参数 |
+|-----------|-----------|-----------|
+| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",

packages/quantity/src/quantity.vue

@@ -44,8 +44,14 @@ export default {
   },
 
   data() {
+    let value = this.value ? +this.value : +this.defaultValue;
+    const correctedValue = this.correctValue(value);
+    if (value !== correctedValue) {
+      value = correctedValue;
+      this.$emit('input', value);
+    }
     return {
-      currentValue: this.value ? +this.value : +this.defaultValue
+      currentValue: value
     };
   },
 
@@ -66,38 +72,37 @@ export default {
 
   watch: {
     currentValue(val) {
-      this.$emit('input', +val);
+      this.$emit('input', val);
+      this.$emit('change', val);
     },
     value(val) {
       if (val) {
-        this.currentValue = +val;
+        this.currentValue = this.correctValue(+val);
       }
     }
   },
 
   methods: {
+    // 纠正value值
+    correctValue(value) {
+      value = Math.max(this.min, value);
+      value = Math.min(this.max, value);
+      return value;
+    },
     handleInputChange(event) {
-      let val = +event.target.value;
-      const max = +this.max;
-      const min = +this.min;
+      const val = +event.target.value;
 
-      if (val > max) {
-        val = max;
-      } else if (val < min) {
-        val = min;
-      }
-
-      this.currentValue = val;
+      this.currentValue = this.correctValue(val);
     },
     handleChange(type) {
       if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
+        this.$emit('overlimit', type);
         return;
       }
 
       const step = +this.step;
       const currentValue = +this.currentValue;
       this.currentValue = type === 'minus' ? (currentValue - step) : (currentValue + step);
-      this.$emit('change', this.currentValue);
     }
   }
 };

packages/swipe/src/swipe-item.vue

@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'zan-swipe-item'
+  name: 'zan-swipe-item',
+
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  }
 };
 </script>

packages/swipe/src/swipe.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="zan-swipe">
-    <slot></slot>
+    <div class="zan-swipe__items">
+      <slot></slot>
+    </div>
+    <div class="zan-swipe__indicators" v-if="showIndicators">
+      <span class="zan-swipe__indicator" v-for="i in swipes.length" :class="{
+        'zan-swipe__indicator--active': currIndex === i -1
+      }">
+      </span>
+    </div>
   </div>
 </template>
 
@@ -13,16 +21,20 @@ export default {
   name: 'zan-swipe',
 
   props: {
-    autoPlay: {
+    autoPlay: Boolean,
+    showIndicators: {
       type: Boolean,
-      default: false
-    },
-    onPageChangeEnd: {
-      type: Function,
-      default: () => {}
+      default: true
     }
   },
 
+  data() {
+    return {
+      currIndex: 0,
+      swipes: []
+    };
+  },
+
   mounted() {
     this.input = new Input(this.$el, {
       listenMoving: true
@@ -53,6 +65,13 @@ export default {
 
   updated() {
     this.scroll.update();
+  },
+
+  methods: {
+    onPageChangeEnd(page, currIndex) {
+      this.currIndex = +currIndex;
+      this.$emit('pagechange:end', page, currIndex);
+    }
   }
 };
 </script>

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/swipe.css

@@ -1,24 +1,56 @@
+@import './common/var.css';
+
 @component-namespace zan {
-    @b swipe {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
+  @b swipe {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    @e indicators {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
     }
 
-    @b swipe-item {
-        display: none;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        text-align: center;
+    @e indicator {
+      width: 5px;
+      height: 5px;
+      display: inline-block;
+      border-radius: 100%;
+      background: #999;
+      opacity: .8;
+      margin: 0 3px;
+      z-index: 1;
 
-        img {
-            width: 100%;
-            height: auto;
-        }
-
-        &:first-child {
-            display: block;
-        }
+      @m active {
+        background: $c-orange;
+        opacity: 1;
+      }
     }
+
+    @e items {
+      position: relative;
+      overflow: hidden;
+      position: relative;
+      height: 100%;
+    }
+  }
+
+  @b swipe-item {
+    display: none;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    &:first-child {
+      display: block;
+    }
+  }
 }

src/index.js

@@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.43',
+  version: '0.0.44',
   Button,
   Switch,
   Field,