diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 0fd446e17..7846421a4 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -12,6 +12,16 @@
}
+
+
## Swipe 轮播
### 基础用法
@@ -33,7 +43,7 @@
:::demo 自动轮播
```html
-
+
@@ -43,3 +53,16 @@
```
:::
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| autoPlay | 是否自动轮播 | `boolean` | `false` | `true`, `false` |
+| showIndicators | 是否显示指示器 | `boolean` | `true` | `true`, `false` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`:`elem`为触发页当前的DOM节点 |
diff --git a/package.json b/package.json
index d0b1fb9b2..bfa3e107c 100644
--- a/package.json
+++ b/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",
diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue
index 469f75ed1..0f16ef49e 100644
--- a/packages/quantity/src/quantity.vue
+++ b/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);
}
}
};
diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue
index 0a7ea92b5..be2dd955a 100644
--- a/packages/swipe/src/swipe-item.vue
+++ b/packages/swipe/src/swipe-item.vue
@@ -6,6 +6,10 @@
diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue
index 83e641a6a..0c335da0e 100644
--- a/packages/swipe/src/swipe.vue
+++ b/packages/swipe/src/swipe.vue
@@ -1,6 +1,14 @@
@@ -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);
+ }
}
};
diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json
index 8169d9ef5..4aad840f4 100644
--- a/packages/zanui-css/package.json
+++ b/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",
diff --git a/packages/zanui-css/src/swipe.css b/packages/zanui-css/src/swipe.css
index e5af9411f..518ded439 100644
--- a/packages/zanui-css/src/swipe.css
+++ b/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;
+ }
+ }
}
diff --git a/src/index.js b/src/index.js
index 429f5fe83..755f16254 100644
--- a/src/index.js
+++ b/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,