blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Swipe: jsx (#2626)

Browse Source
This commit is contained in:
neverland 2019-01-26 09:43:46 +08:00 committed by GitHub
parent 4e6d0b9c79
commit fab090bef9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -9,7 +9,6 @@ exports[`render image 1`] = `
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image"></div>
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image"></div>
</div>
<!---->
</div>
</div>
`;
@ -23,7 +22,6 @@ exports[`zoom 1`] = `
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image"></div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image"></div>
</div>
<!---->
</div>
</div>
`;

5
packages/number-keyboard/index.js
View File

@ -1,4 +1,5 @@
import { use } from '../utils';
import { stop } from '../utils/event';
import Key from './Key';
const [sfc, bem, t] = use('number-keyboard');
@ -140,9 +141,7 @@ export default sfc({
v-show={this.show}
style={{ zIndex: this.zIndex }}
class={bem([theme])}
onTouchstart={event => {
event.stopPropagation();
}}
onTouchstart={stop}
onAnimationend={this.onAnimationEnd}
onWebkitAnimationEnd={this.onAnimationEnd}
>

5
packages/picker/index.js
View File

@ -1,4 +1,5 @@
import { use } from '../utils';
import { prevent } from '../utils/event';
import Loading from '../loading';
import PickerColumn from './PickerColumn';
import deepClone from '../utils/deep-clone';
@ -171,9 +172,7 @@ export default sfc({
<div
class={bem('columns')}
style={columnsStyle}
onTouchmove={event => {
event.preventDefault();
}}
onTouchmove={prevent}
>
{columns.map((item, index) => (
<PickerColumn

81
packages/swipe/index.vue → packages/swipe/index.js
View File

@ -1,40 +1,10 @@
<template>
<div :class="b()">
<div
:style="trackStyle"
:class="b('track')"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
@transitionend.stop="$emit('change', activeIndicator)"
>
<slot />
</div>
<slot name="indicator">
<div
v-if="showIndicators && count > 1"
:class="b('indicators', { vertical })"
@transitionend.stop
>
<i
v-for="index in count"
:class="b('indicator', { active: index - 1 === activeIndicator })"
:style="index - 1 === activeIndicator ? indicatorStyle : null"
/>
</div>
</slot>
</div>
</template>
<script>
import create from '../utils/create';
import { use } from '../utils';
import Touch from '../mixins/touch';
import { on, off } from '../utils/event';
import { on, off, stop } from '../utils/event';
export default create({
name: 'swipe',
const [sfc, bem] = use('swipe');
export default sfc({
mixins: [Touch],
props: {
@ -222,8 +192,7 @@ export default create({
const atLast = active === count - 1;
const outOfBounds =
!this.loop &&
((atFirst && (offset > 0 || move < 0)) ||
(atLast && (offset < 0 || move > 0)));
((atFirst && (offset > 0 || move < 0)) || (atLast && (offset < 0 || move > 0)));
if (outOfBounds || count <= 1) {
return;
@ -284,7 +253,45 @@ export default create({
}, 30);
}, autoplay);
}
},
onTransitionend(event) {
event.stopPropagation();
this.$emit('change', this.activeIndicator);
}
},
render(h) {
const { count, activeIndicator } = this;
const Indicator =
this.$slots.indicator ||
(this.showIndicators && count > 1 && (
<div class={bem('indicators', { vertical: this.vertical })} onTransitionend={stop}>
{Array(...Array(count)).map((empty, index) => (
<i
class={bem('indicator', { active: index === activeIndicator })}
style={index === activeIndicator ? this.indicatorStyle : null}
/>
))}
</div>
));
return (
<div class={bem()}>
<div
style={this.trackStyle}
class={bem('track')}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
onTransitionend={this.onTransitionend}
>
{this.$slots.default}
</div>
{Indicator}
</div>
);
}
});
</script>

5
packages/swipe/test/__snapshots__/demo.spec.js.snap
View File

@ -10,7 +10,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
</div>
<!---->
</div>
</div>
<div>
@ -21,7 +20,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
</div>
<!---->
</div>
</div>
<div>
@ -32,7 +30,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
</div>
<!---->
</div>
</div>
<div>
@ -43,7 +40,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">3</div>
<div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">4</div>
</div>
<!---->
</div>
</div>
<div>
@ -54,7 +50,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
<div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
</div>
<!---->
</div>
</div>
<div>

8
packages/utils/event.js
View File

@ -30,3 +30,11 @@ export function on(target, event, handler, passive = false) {
export function off(target, event, handler) {
!isServer && target.removeEventListener(event, handler);
}
export function stop(event) {
event.stopPropagation();
}
export function prevent(event) {
event.preventDefault();
}