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,