mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
refactor(Swipe): refactor with composition api
This commit is contained in:
chenjiahan
parent
06c05ba8bd
commit
39c68c993a
@ -64,9 +64,9 @@
|
||||
"devDependencies": {
|
||||
"@ls-lint/ls-lint": "^1.8.0",
|
||||
"@vant/cli": "^3.0.0-alpha.10",
|
||||
"@vue/compiler-sfc": "3.0.0-rc.10",
|
||||
"@vue/compiler-sfc": "3.0.0-rc.12",
|
||||
"prettier": "^2.0.4",
|
||||
"vue": "3.0.0-rc.10"
|
||||
"vue": "3.0.0-rc.12"
|
||||
},
|
||||
"sideEffects": [
|
||||
"es/**/style/*",
|
||||
|
||||
@ -1,63 +1,63 @@
|
||||
import { computed, nextTick, onMounted, reactive } from 'vue';
|
||||
import { SWIPE_KEY } from '../swipe';
|
||||
import { createNamespace } from '../utils';
|
||||
import { ChildrenMixin } from '../mixins/relation';
|
||||
import { useParent } from '../composition/use-relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('swipe-item');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ChildrenMixin('vanSwipe')],
|
||||
|
||||
data() {
|
||||
return {
|
||||
setup(props, { slots }) {
|
||||
const state = reactive({
|
||||
offset: 0,
|
||||
mounted: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.mounted = true;
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
const setOffset = (offset) => {
|
||||
state.offset = offset;
|
||||
};
|
||||
|
||||
const { parent, index } = useParent(SWIPE_KEY, { setOffset });
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
state.mounted = true;
|
||||
});
|
||||
});
|
||||
|
||||
const style = computed(() => {
|
||||
const style = {};
|
||||
const { size, vertical } = this.parent;
|
||||
const { vertical } = parent.props;
|
||||
|
||||
style[vertical ? 'height' : 'width'] = `${size}px`;
|
||||
style[vertical ? 'height' : 'width'] = `${parent.size.value}px`;
|
||||
|
||||
if (this.offset) {
|
||||
style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
|
||||
if (state.offset) {
|
||||
style.transform = `translate${vertical ? 'Y' : 'X'}(${state.offset}px)`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
});
|
||||
|
||||
shouldRender() {
|
||||
const { index, parent, mounted } = this;
|
||||
|
||||
if (!parent.lazyRender) {
|
||||
const shouldRender = computed(() => {
|
||||
if (!parent.props.lazyRender) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// wait for all item to mount, so we can get the exact count
|
||||
if (!mounted) {
|
||||
if (!state.mounted) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const active = parent.activeIndicator;
|
||||
const maxActive = parent.count - 1;
|
||||
const active = parent.activeIndicator.value;
|
||||
const maxActive = parent.count.value - 1;
|
||||
const prevActive = active === 0 ? maxActive : active - 1;
|
||||
const nextActive = active === maxActive ? 0 : active + 1;
|
||||
|
||||
return index === active || index === prevActive || index === nextActive;
|
||||
},
|
||||
},
|
||||
return index.value >= prevActive || index.value <= nextActive;
|
||||
});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={bem()} style={this.style}>
|
||||
{this.shouldRender ? this.$slots.default?.() : null}
|
||||
return () => (
|
||||
<div class={bem()} style={style.value}>
|
||||
{shouldRender.value ? slots.default?.() : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,34 +1,33 @@
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
provide,
|
||||
reactive,
|
||||
computed,
|
||||
onMounted,
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onBeforeUnmount,
|
||||
} from 'vue';
|
||||
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { isHidden } from '../utils/dom/style';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { doubleRaf } from '../utils/dom/raf';
|
||||
import { range } from '../utils/format/number';
|
||||
import { isHidden } from '../utils/dom/style';
|
||||
import { doubleRaf } from '../utils/dom/raf';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
|
||||
// Mixins
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
// Composition
|
||||
import { useTouch } from '../composition/use-touch';
|
||||
import { useRect } from '../composition/use-rect';
|
||||
import { useExpose } from '../composition/use-expose';
|
||||
import { usePageVisibility, useWindowSize } from '@vant/use';
|
||||
|
||||
const [createComponent, bem] = createNamespace('swipe');
|
||||
|
||||
export const SWIPE_KEY = 'vanSwipe';
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
TouchMixin,
|
||||
ParentMixin('vanSwipe'),
|
||||
BindEventMixin(function (bind, isBind) {
|
||||
bind(window, 'resize', this.resize, true);
|
||||
bind(window, 'orientationchange', this.resize, true);
|
||||
bind(window, 'visibilitychange', this.onVisibilityChange);
|
||||
|
||||
if (isBind) {
|
||||
this.initialize();
|
||||
} else {
|
||||
this.clear();
|
||||
}
|
||||
}),
|
||||
],
|
||||
|
||||
props: {
|
||||
width: [Number, String],
|
||||
height: [Number, String],
|
||||
@ -64,360 +63,356 @@ export default createComponent({
|
||||
|
||||
emits: ['change'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
setup(props, { emit, slots }) {
|
||||
const root = ref();
|
||||
const state = reactive({
|
||||
rect: null,
|
||||
width: 0,
|
||||
height: 0,
|
||||
offset: 0,
|
||||
active: 0,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
swiping: false,
|
||||
computedWidth: 0,
|
||||
computedHeight: 0,
|
||||
};
|
||||
},
|
||||
});
|
||||
const children = reactive([]);
|
||||
|
||||
watch: {
|
||||
children() {
|
||||
this.initialize();
|
||||
},
|
||||
const touch = useTouch();
|
||||
const windowSize = useWindowSize();
|
||||
|
||||
initialSwipe() {
|
||||
this.initialize();
|
||||
},
|
||||
const count = computed(() => children.length);
|
||||
|
||||
autoplay(autoplay) {
|
||||
if (autoplay > 0) {
|
||||
this.autoPlay();
|
||||
} else {
|
||||
this.clear();
|
||||
}
|
||||
},
|
||||
},
|
||||
const size = computed(() => state[props.vertical ? 'height' : 'width']);
|
||||
|
||||
computed: {
|
||||
count() {
|
||||
return this.children.length;
|
||||
},
|
||||
const delta = computed(() =>
|
||||
props.vertical ? touch.deltaY.value : touch.deltaX.value
|
||||
);
|
||||
|
||||
maxCount() {
|
||||
return Math.ceil(Math.abs(this.minOffset) / this.size);
|
||||
},
|
||||
const minOffset = computed(
|
||||
() =>
|
||||
(props.vertical ? state.rect.height : state.rect.width) -
|
||||
size.value * count.value
|
||||
);
|
||||
|
||||
delta() {
|
||||
return this.vertical ? this.deltaY : this.deltaX;
|
||||
},
|
||||
const maxCount = computed(() =>
|
||||
Math.ceil(Math.abs(minOffset.value) / size.value)
|
||||
);
|
||||
|
||||
size() {
|
||||
return this[this.vertical ? 'computedHeight' : 'computedWidth'];
|
||||
},
|
||||
const trackSize = computed(() => count.value * size.value);
|
||||
|
||||
trackSize() {
|
||||
return this.count * this.size;
|
||||
},
|
||||
const activeIndicator = computed(
|
||||
() => (state.active + count.value) % count.value
|
||||
);
|
||||
|
||||
activeIndicator() {
|
||||
return (this.active + this.count) % this.count;
|
||||
},
|
||||
const isCorrectDirection = computed(() => {
|
||||
const expect = props.vertical ? 'vertical' : 'horizontal';
|
||||
return touch.direction.value === expect;
|
||||
});
|
||||
|
||||
isCorrectDirection() {
|
||||
const expect = this.vertical ? 'vertical' : 'horizontal';
|
||||
return this.direction === expect;
|
||||
},
|
||||
|
||||
trackStyle() {
|
||||
const mainAxis = this.vertical ? 'height' : 'width';
|
||||
const crossAxis = this.vertical ? 'width' : 'height';
|
||||
const trackStyle = computed(() => {
|
||||
const mainAxis = props.vertical ? 'height' : 'width';
|
||||
const crossAxis = props.vertical ? 'width' : 'height';
|
||||
|
||||
return {
|
||||
[mainAxis]: `${this.trackSize}px`,
|
||||
[crossAxis]: this[crossAxis] ? `${this[crossAxis]}px` : '',
|
||||
transitionDuration: `${this.swiping ? 0 : this.duration}ms`,
|
||||
transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`,
|
||||
[mainAxis]: `${trackSize.value}px`,
|
||||
[crossAxis]: props[crossAxis] ? `${props[crossAxis]}px` : '',
|
||||
transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
|
||||
transform: `translate${props.vertical ? 'Y' : 'X'}(${state.offset}px)`,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
indicatorStyle() {
|
||||
return {
|
||||
backgroundColor: this.indicatorColor,
|
||||
};
|
||||
},
|
||||
|
||||
minOffset() {
|
||||
return (
|
||||
(this.vertical ? this.rect.height : this.rect.width) -
|
||||
this.size * this.count
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.bindTouchEvent(this.$refs.track);
|
||||
},
|
||||
|
||||
methods: {
|
||||
// initialize swipe position
|
||||
initialize(active = +this.initialSwipe) {
|
||||
if (!this.$el || isHidden(this.$el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(this.timer);
|
||||
|
||||
const rect = this.$el.getBoundingClientRect();
|
||||
|
||||
this.rect = rect;
|
||||
this.swiping = true;
|
||||
this.active = active;
|
||||
this.computedWidth = Math.round(+this.width || rect.width);
|
||||
this.computedHeight = Math.round(+this.height || rect.height);
|
||||
this.offset = this.getTargetOffset(active);
|
||||
this.children.forEach((swipe) => {
|
||||
swipe.offset = 0;
|
||||
});
|
||||
this.autoPlay();
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
resize() {
|
||||
this.initialize(this.activeIndicator);
|
||||
},
|
||||
|
||||
onVisibilityChange() {
|
||||
if (document.hidden) {
|
||||
this.clear();
|
||||
} else {
|
||||
this.autoPlay();
|
||||
}
|
||||
},
|
||||
|
||||
onTouchStart(event) {
|
||||
if (!this.touchable) return;
|
||||
|
||||
this.clear();
|
||||
this.touchStartTime = Date.now();
|
||||
this.touchStart(event);
|
||||
this.correctPosition();
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
if (!this.touchable || !this.swiping) return;
|
||||
|
||||
this.touchMove(event);
|
||||
|
||||
if (this.isCorrectDirection) {
|
||||
preventDefault(event, this.stopPropagation);
|
||||
this.move({ offset: this.delta });
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
if (!this.touchable || !this.swiping) return;
|
||||
|
||||
const { size, delta } = this;
|
||||
const duration = Date.now() - this.touchStartTime;
|
||||
const speed = delta / duration;
|
||||
const shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta) > size / 2;
|
||||
|
||||
if (shouldSwipe && this.isCorrectDirection) {
|
||||
const offset = this.vertical ? this.offsetY : this.offsetX;
|
||||
|
||||
let pace = 0;
|
||||
|
||||
if (this.loop) {
|
||||
pace = offset > 0 ? (delta > 0 ? -1 : 1) : 0;
|
||||
} else {
|
||||
pace = -Math[delta > 0 ? 'ceil' : 'floor'](delta / size);
|
||||
}
|
||||
|
||||
this.move({
|
||||
pace,
|
||||
emitChange: true,
|
||||
});
|
||||
} else if (delta) {
|
||||
this.move({ pace: 0 });
|
||||
}
|
||||
|
||||
this.swiping = false;
|
||||
this.autoPlay();
|
||||
},
|
||||
|
||||
getTargetActive(pace) {
|
||||
const { active, count, maxCount } = this;
|
||||
const getTargetActive = (pace) => {
|
||||
const { active } = state;
|
||||
|
||||
if (pace) {
|
||||
if (this.loop) {
|
||||
return range(active + pace, -1, count);
|
||||
if (props.loop) {
|
||||
return range(active + pace, -1, count.value);
|
||||
}
|
||||
|
||||
return range(active + pace, 0, maxCount);
|
||||
return range(active + pace, 0, maxCount.value);
|
||||
}
|
||||
|
||||
return active;
|
||||
},
|
||||
};
|
||||
|
||||
getTargetOffset(targetActive, offset = 0) {
|
||||
let currentPosition = targetActive * this.size;
|
||||
if (!this.loop) {
|
||||
currentPosition = Math.min(currentPosition, -this.minOffset);
|
||||
const getTargetOffset = (targetActive, offset = 0) => {
|
||||
let currentPosition = targetActive * size.value;
|
||||
if (!props.loop) {
|
||||
currentPosition = Math.min(currentPosition, -minOffset.value);
|
||||
}
|
||||
|
||||
let targetOffset = Math.round(offset - currentPosition);
|
||||
if (!this.loop) {
|
||||
targetOffset = range(targetOffset, this.minOffset, 0);
|
||||
if (!props.loop) {
|
||||
targetOffset = range(targetOffset, minOffset.value, 0);
|
||||
}
|
||||
|
||||
return targetOffset;
|
||||
},
|
||||
};
|
||||
|
||||
move({ pace = 0, offset = 0, emitChange }) {
|
||||
const { loop, count, active, children, trackSize, minOffset } = this;
|
||||
|
||||
if (count <= 1) {
|
||||
const move = ({ pace = 0, offset = 0, emitChange }) => {
|
||||
if (count.value <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetActive = this.getTargetActive(pace);
|
||||
const targetOffset = this.getTargetOffset(targetActive, offset);
|
||||
const { active } = state;
|
||||
const targetActive = getTargetActive(pace);
|
||||
const targetOffset = getTargetOffset(targetActive, offset);
|
||||
|
||||
// auto move first and last swipe in loop mode
|
||||
if (loop) {
|
||||
if (children[0] && targetOffset !== minOffset) {
|
||||
const outRightBound = targetOffset < minOffset;
|
||||
children[0].offset = outRightBound ? trackSize : 0;
|
||||
if (props.loop) {
|
||||
if (children[0] && targetOffset !== minOffset.value) {
|
||||
const outRightBound = targetOffset < minOffset.value;
|
||||
children[0].setOffset(outRightBound ? trackSize.value : 0);
|
||||
}
|
||||
|
||||
if (children[count - 1] && targetOffset !== 0) {
|
||||
if (children[count.value - 1] && targetOffset !== 0) {
|
||||
const outLeftBound = targetOffset > 0;
|
||||
children[count - 1].offset = outLeftBound ? -trackSize : 0;
|
||||
children[count.value - 1].setOffset(
|
||||
outLeftBound ? -trackSize.value : 0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.active = targetActive;
|
||||
this.offset = targetOffset;
|
||||
state.active = targetActive;
|
||||
state.offset = targetOffset;
|
||||
|
||||
if (emitChange && targetActive !== active) {
|
||||
this.$emit('change', this.activeIndicator);
|
||||
emit('change', activeIndicator.value);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// @exposed-api
|
||||
prev() {
|
||||
this.correctPosition();
|
||||
this.resetTouchStatus();
|
||||
const correctPosition = () => {
|
||||
state.swiping = true;
|
||||
|
||||
if (state.active <= -1) {
|
||||
move({ pace: count.value });
|
||||
}
|
||||
if (state.active >= count.value) {
|
||||
move({ pace: -count.value });
|
||||
}
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
correctPosition();
|
||||
touch.reset();
|
||||
|
||||
doubleRaf(() => {
|
||||
this.swiping = false;
|
||||
this.move({
|
||||
state.swiping = false;
|
||||
move({
|
||||
pace: -1,
|
||||
emitChange: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// @exposed-api
|
||||
next() {
|
||||
this.correctPosition();
|
||||
this.resetTouchStatus();
|
||||
const next = () => {
|
||||
correctPosition();
|
||||
touch.reset();
|
||||
|
||||
doubleRaf(() => {
|
||||
this.swiping = false;
|
||||
this.move({
|
||||
state.swiping = false;
|
||||
move({
|
||||
pace: 1,
|
||||
emitChange: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// @exposed-api
|
||||
swipeTo(index, options = {}) {
|
||||
this.correctPosition();
|
||||
this.resetTouchStatus();
|
||||
let autoplayTimer;
|
||||
|
||||
const stopAutoplay = () => {
|
||||
clearTimeout(autoplayTimer);
|
||||
};
|
||||
|
||||
const autoplay = () => {
|
||||
if (props.autoplay > 0 && count.value > 1) {
|
||||
stopAutoplay();
|
||||
autoplayTimer = setTimeout(() => {
|
||||
next();
|
||||
autoplay();
|
||||
}, props.autoplay);
|
||||
}
|
||||
};
|
||||
|
||||
// initialize swipe position
|
||||
const initialize = (active = +props.initialSwipe) => {
|
||||
if (!root.value || isHidden(root)) {
|
||||
return;
|
||||
}
|
||||
|
||||
stopAutoplay();
|
||||
|
||||
const rect = useRect(root);
|
||||
|
||||
state.rect = rect;
|
||||
state.swiping = true;
|
||||
state.active = active;
|
||||
state.width = Math.round(+props.width || rect.width);
|
||||
state.height = Math.round(+props.height || rect.height);
|
||||
state.offset = getTargetOffset(active);
|
||||
children.forEach((swipe) => {
|
||||
swipe.setOffset(0);
|
||||
});
|
||||
|
||||
autoplay();
|
||||
};
|
||||
|
||||
const resize = () => {
|
||||
initialize(activeIndicator.value);
|
||||
};
|
||||
|
||||
let touchStartTime;
|
||||
|
||||
const onTouchStart = (event) => {
|
||||
if (!props.touchable) return;
|
||||
|
||||
touch.start(event);
|
||||
touchStartTime = Date.now();
|
||||
|
||||
stopAutoplay();
|
||||
correctPosition();
|
||||
};
|
||||
|
||||
const onTouchMove = (event) => {
|
||||
if (props.touchable && state.swiping) {
|
||||
touch.move(event);
|
||||
|
||||
if (isCorrectDirection.value) {
|
||||
preventDefault(event, props.stopPropagation);
|
||||
move({ offset: delta.value });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onTouchEnd = () => {
|
||||
if (!props.touchable || !state.swiping) {
|
||||
return;
|
||||
}
|
||||
|
||||
const duration = Date.now() - touchStartTime;
|
||||
const speed = delta.value / duration;
|
||||
const shouldSwipe =
|
||||
Math.abs(speed) > 0.25 || Math.abs(delta.value) > size.value / 2;
|
||||
|
||||
if (shouldSwipe && isCorrectDirection.value) {
|
||||
const offset = props.vertical
|
||||
? touch.offsetY.value
|
||||
: touch.offsetX.value;
|
||||
|
||||
let pace = 0;
|
||||
|
||||
if (props.loop) {
|
||||
pace = offset > 0 ? (delta.value > 0 ? -1 : 1) : 0;
|
||||
} else {
|
||||
pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
|
||||
delta.value / size.value
|
||||
);
|
||||
}
|
||||
|
||||
move({
|
||||
pace,
|
||||
emitChange: true,
|
||||
});
|
||||
} else if (delta.value) {
|
||||
move({ pace: 0 });
|
||||
}
|
||||
|
||||
state.swiping = false;
|
||||
autoplay();
|
||||
};
|
||||
|
||||
const swipeTo = (index, options = {}) => {
|
||||
correctPosition();
|
||||
touch.reset();
|
||||
|
||||
doubleRaf(() => {
|
||||
let targetIndex;
|
||||
if (this.loop && index === this.count) {
|
||||
targetIndex = this.active === 0 ? 0 : index;
|
||||
if (props.loop && index === count.value) {
|
||||
targetIndex = state.active === 0 ? 0 : index;
|
||||
} else {
|
||||
targetIndex = index % this.count;
|
||||
targetIndex = index % count.value;
|
||||
}
|
||||
|
||||
if (options.immediate) {
|
||||
doubleRaf(() => {
|
||||
this.swiping = false;
|
||||
state.swiping = false;
|
||||
});
|
||||
} else {
|
||||
this.swiping = false;
|
||||
state.swiping = false;
|
||||
}
|
||||
|
||||
this.move({
|
||||
pace: targetIndex - this.active,
|
||||
move({
|
||||
pace: targetIndex - state.active,
|
||||
emitChange: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
correctPosition() {
|
||||
this.swiping = true;
|
||||
const renderDot = (_, index) => {
|
||||
const active = index === activeIndicator.value;
|
||||
const style = active ? { backgroundColor: props.indicatorColor } : null;
|
||||
return <i style={style} class={bem('indicator', { active })} />;
|
||||
};
|
||||
|
||||
if (this.active <= -1) {
|
||||
this.move({ pace: this.count });
|
||||
const renderIndicator = () => {
|
||||
if (slots.indicator) {
|
||||
return slots.indicator();
|
||||
}
|
||||
|
||||
if (this.active >= this.count) {
|
||||
this.move({ pace: -this.count });
|
||||
}
|
||||
},
|
||||
|
||||
clear() {
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
|
||||
autoPlay() {
|
||||
const { autoplay } = this;
|
||||
|
||||
if (autoplay > 0 && this.count > 1) {
|
||||
this.clear();
|
||||
this.timer = setTimeout(() => {
|
||||
this.next();
|
||||
this.autoPlay();
|
||||
}, autoplay);
|
||||
}
|
||||
},
|
||||
|
||||
genIndicator() {
|
||||
const { count, activeIndicator } = this;
|
||||
|
||||
if (this.$slots.indicator) {
|
||||
return this.$slots.indicator();
|
||||
}
|
||||
|
||||
if (this.showIndicators && count > 1) {
|
||||
if (props.showIndicators && count.value > 1) {
|
||||
return (
|
||||
<div class={bem('indicators', { vertical: this.vertical })}>
|
||||
{Array(...Array(count)).map((empty, index) => (
|
||||
<i
|
||||
class={bem('indicator', { active: index === activeIndicator })}
|
||||
style={index === activeIndicator ? this.indicatorStyle : null}
|
||||
/>
|
||||
))}
|
||||
<div class={bem('indicators', { vertical: props.vertical })}>
|
||||
{Array(...Array(count.value)).map(renderDot)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={bem()}>
|
||||
useExpose({
|
||||
prev,
|
||||
next,
|
||||
resize,
|
||||
swipeTo,
|
||||
});
|
||||
|
||||
provide(SWIPE_KEY, { size, props, count, children, activeIndicator });
|
||||
|
||||
watch([children, () => props.initialSwipe], initialize);
|
||||
|
||||
watch(
|
||||
() => props.autoplay,
|
||||
(value) => {
|
||||
if (value > 0) {
|
||||
autoplay();
|
||||
} else {
|
||||
stopAutoplay();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch([windowSize.width, windowSize.height], resize);
|
||||
|
||||
watch(usePageVisibility(), (visible) => {
|
||||
if (visible) {
|
||||
autoplay();
|
||||
} else {
|
||||
stopAutoplay();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(initialize);
|
||||
onActivated(initialize);
|
||||
onDeactivated(stopAutoplay);
|
||||
onBeforeUnmount(stopAutoplay);
|
||||
|
||||
return () => (
|
||||
<div ref={root} class={bem()}>
|
||||
<div
|
||||
ref="track"
|
||||
style={this.trackStyle}
|
||||
class={bem('track', { vertical: this.vertical })}
|
||||
style={trackStyle.value}
|
||||
class={bem('track', { vertical: props.vertical })}
|
||||
onTouchstart={onTouchStart}
|
||||
onTouchmove={onTouchMove}
|
||||
onTouchend={onTouchEnd}
|
||||
onTouchcancel={onTouchEnd}
|
||||
>
|
||||
{this.$slots.default?.()}
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
{this.genIndicator()}
|
||||
{renderIndicator()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
151
yarn.lock
151
yarn.lock
@ -441,6 +441,11 @@
|
||||
resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
|
||||
integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
|
||||
|
||||
"@babel/parser@^7.11.5":
|
||||
version "7.11.5"
|
||||
resolved "https://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
|
||||
integrity sha1-x/9jA99xCA7HpPW4wAPFjxz1EDc=
|
||||
|
||||
"@babel/plugin-proposal-async-generator-functions@^7.10.4":
|
||||
version "7.10.4"
|
||||
resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.4.tgz#4b65abb3d9bacc6c657aaa413e56696f9f170fc6"
|
||||
@ -1132,6 +1137,15 @@
|
||||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@babel/types@^7.11.5":
|
||||
version "7.11.5"
|
||||
resolved "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
|
||||
integrity sha1-2d5XfQElLXfGgAzuA57mT691Zi0=
|
||||
dependencies:
|
||||
"@babel/helper-validator-identifier" "^7.10.4"
|
||||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@bcoe/v8-coverage@^0.2.3":
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
|
||||
@ -2180,54 +2194,54 @@
|
||||
html-tags "^3.1.0"
|
||||
svg-tags "^1.0.0"
|
||||
|
||||
"@vue/compiler-core@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111625&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.0.0-rc.10.tgz#a76f713fb0462429ec0ec10a472fff1f539c5772"
|
||||
integrity sha1-p29xP7BGJCnsDsEKRy//H1OcV3I=
|
||||
"@vue/compiler-core@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0-rc.12.tgz#eb26ff2f7e0eb8b362606228b2dda59c0c914f63"
|
||||
integrity sha1-6yb/L34OuLNiYGIost2lnAyRT2M=
|
||||
dependencies:
|
||||
"@babel/parser" "^7.10.4"
|
||||
"@babel/types" "^7.10.4"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@babel/parser" "^7.11.5"
|
||||
"@babel/types" "^7.11.5"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
estree-walker "^2.0.1"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-dom@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.0.0-rc.10.tgz#dd1380d1ee61170de76f9eb91e0d8ac7985f0ae0"
|
||||
integrity sha1-3ROA0e5hFw3nb565Hg2Kx5hfCuA=
|
||||
"@vue/compiler-dom@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0-rc.12.tgz#b8468cb3f81d43ca25592026482e1330b99f2b8c"
|
||||
integrity sha1-uEaMs/gdQ8olWSAmSC4TMLmfK4w=
|
||||
dependencies:
|
||||
"@vue/compiler-core" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/compiler-core" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
|
||||
"@vue/compiler-sfc@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111795&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-sfc%2Fdownload%2F%40vue%2Fcompiler-sfc-3.0.0-rc.10.tgz#4351ece66cdf4d758877482f69421c43d994dbaf"
|
||||
integrity sha1-Q1Hs5mzfTXWId0gvaUIcQ9mU268=
|
||||
"@vue/compiler-sfc@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.0-rc.12.tgz#eff29e9688b8ed840506d88b94336689cf2970f2"
|
||||
integrity sha1-7/Keloi47YQFBtiLlDNmic8pcPI=
|
||||
dependencies:
|
||||
"@babel/parser" "^7.10.4"
|
||||
"@babel/types" "^7.10.4"
|
||||
"@vue/compiler-core" "3.0.0-rc.10"
|
||||
"@vue/compiler-dom" "3.0.0-rc.10"
|
||||
"@vue/compiler-ssr" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
consolidate "^0.15.1"
|
||||
"@babel/parser" "^7.11.5"
|
||||
"@babel/types" "^7.11.5"
|
||||
"@vue/compiler-core" "3.0.0-rc.12"
|
||||
"@vue/compiler-dom" "3.0.0-rc.12"
|
||||
"@vue/compiler-ssr" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
consolidate "^0.16.0"
|
||||
estree-walker "^2.0.1"
|
||||
hash-sum "^2.0.0"
|
||||
lru-cache "^5.1.1"
|
||||
magic-string "^0.25.7"
|
||||
merge-source-map "^1.1.0"
|
||||
postcss "^7.0.27"
|
||||
postcss-modules "^3.1.0"
|
||||
postcss "^7.0.32"
|
||||
postcss-modules "^3.2.2"
|
||||
postcss-selector-parser "^6.0.2"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-ssr@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111870&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-ssr%2Fdownload%2F%40vue%2Fcompiler-ssr-3.0.0-rc.10.tgz#95a5f6b65b19a514c94f056994ec144b3b1b03ae"
|
||||
integrity sha1-laX2tlsZpRTJTwVplOwUSzsbA64=
|
||||
"@vue/compiler-ssr@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.0-rc.12.tgz#ea37bfb616d90c376a5ef40bc65c57514bb6fef3"
|
||||
integrity sha1-6je/thbZDDdqXvQLxlxXUUu2/vM=
|
||||
dependencies:
|
||||
"@vue/compiler-dom" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/compiler-dom" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
|
||||
"@vue/component-compiler-utils@^3.1.2":
|
||||
version "3.1.2"
|
||||
@ -2245,34 +2259,34 @@
|
||||
optionalDependencies:
|
||||
prettier "^1.18.2"
|
||||
|
||||
"@vue/reactivity@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.0.0-rc.10.tgz#34d5f51bcc5a7c36e27d7a9c1bd7a3d25ffa7c56"
|
||||
integrity sha1-NNX1G8xafDbifXqcG9ej0l/6fFY=
|
||||
"@vue/reactivity@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-rc.12.tgz#9f5c6da78729fe80cc47d23bc8b6c09b36998a29"
|
||||
integrity sha1-n1xtp4cp/oDMR9I7yLbAmzaZiik=
|
||||
dependencies:
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
|
||||
"@vue/runtime-core@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204365&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-core%2Fdownload%2F%40vue%2Fruntime-core-3.0.0-rc.10.tgz#9055aef5113cbc328aaec29760c2151e0ed3cf40"
|
||||
integrity sha1-kFWu9RE8vDKKrsKXYMIVHg7Tz0A=
|
||||
"@vue/runtime-core@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0-rc.12.tgz#021dbfabe5f50043790fb80d5235b6cedb3de4ac"
|
||||
integrity sha1-Ah2/q+X1AEN5D7gNUjW2zts95Kw=
|
||||
dependencies:
|
||||
"@vue/reactivity" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/reactivity" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
|
||||
"@vue/runtime-dom@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204677&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-dom%2Fdownload%2F%40vue%2Fruntime-dom-3.0.0-rc.10.tgz#50f95cb991483a4262163723320967ad17bb321f"
|
||||
integrity sha1-UPlcuZFIOkJiFjcjMglnrRe7Mh8=
|
||||
"@vue/runtime-dom@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0-rc.12.tgz#cdc197736d6092bfcc39bdf50349a28f175d2103"
|
||||
integrity sha1-zcGXc21gkr/MOb31A0mijxddIQM=
|
||||
dependencies:
|
||||
"@vue/runtime-core" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/runtime-core" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
csstype "^2.6.8"
|
||||
|
||||
"@vue/shared@3.0.0-rc.10":
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065113122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fshared%2Fdownload%2F%40vue%2Fshared-3.0.0-rc.10.tgz#e7ab62abcabbfc738545902b96a3aa78f59f3286"
|
||||
integrity sha1-56tiq8q7/HOFRZArlqOqePWfMoY=
|
||||
"@vue/shared@3.0.0-rc.12":
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-rc.12.tgz#b114d999d6f51191f4ff6b284fa7bddf4c8589bc"
|
||||
integrity sha1-sRTZmdb1EZH0/2soT6e930yFibw=
|
||||
|
||||
"@vue/test-utils@2.0.0-beta.4":
|
||||
version "2.0.0-beta.4"
|
||||
@ -3046,7 +3060,7 @@ bindings@^1.5.0:
|
||||
dependencies:
|
||||
file-uri-to-path "1.0.0"
|
||||
|
||||
bluebird@^3.1.1, bluebird@^3.5.5:
|
||||
bluebird@^3.1.1, bluebird@^3.5.5, bluebird@^3.7.2:
|
||||
version "3.7.2"
|
||||
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
||||
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
||||
@ -3924,6 +3938,13 @@ consolidate@^0.15.1:
|
||||
dependencies:
|
||||
bluebird "^3.1.1"
|
||||
|
||||
consolidate@^0.16.0:
|
||||
version "0.16.0"
|
||||
resolved "https://registry.npm.taobao.org/consolidate/download/consolidate-0.16.0.tgz?cache=0&sync_timestamp=1599597070540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsolidate%2Fdownload%2Fconsolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
|
||||
integrity sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=
|
||||
dependencies:
|
||||
bluebird "^3.7.2"
|
||||
|
||||
constants-browserify@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
|
||||
@ -9504,10 +9525,10 @@ postcss-modules-values@^3.0.0:
|
||||
icss-utils "^4.0.0"
|
||||
postcss "^7.0.6"
|
||||
|
||||
postcss-modules@^3.1.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.npmjs.org/postcss-modules/-/postcss-modules-3.2.0.tgz#1ca870d197cd09a7964253e12de2aac906c94256"
|
||||
integrity sha512-ceodlVbBypGD3R7EI1xM7gz28J0syaXq0VKd7rJVXVlOSkxUIRBRJQjBgpoKnKVFNAcCjtLVgZqBA3mUNntWPA==
|
||||
postcss-modules@^3.2.2:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-3.2.2.tgz?cache=0&sync_timestamp=1598264337271&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-3.2.2.tgz#ee390de0f9f18e761e1778dfb9be26685c02c51f"
|
||||
integrity sha1-7jkN4PnxjnYeF3jfub4maFwCxR8=
|
||||
dependencies:
|
||||
generic-names "^2.0.1"
|
||||
icss-replace-symbols "^1.1.0"
|
||||
@ -12465,14 +12486,14 @@ vue-template-es2015-compiler@^1.9.0:
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
|
||||
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
|
||||
|
||||
vue@3.0.0-rc.10:
|
||||
version "3.0.0-rc.10"
|
||||
resolved "https://registry.npm.taobao.org/vue/download/vue-3.0.0-rc.10.tgz#31298a757b4fad6ee8973d0fa27c4fde8574bd01"
|
||||
integrity sha1-MSmKdXtPrW7olz0PonxP3oV0vQE=
|
||||
vue@3.0.0-rc.12:
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.npm.taobao.org/vue/download/vue-3.0.0-rc.12.tgz?cache=0&sync_timestamp=1600279309948&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-3.0.0-rc.12.tgz#08849531c9255f290b552912ae52802c5bc323d5"
|
||||
integrity sha1-CISVMcklXykLVSkSrlKALFvDI9U=
|
||||
dependencies:
|
||||
"@vue/compiler-dom" "3.0.0-rc.10"
|
||||
"@vue/runtime-dom" "3.0.0-rc.10"
|
||||
"@vue/shared" "3.0.0-rc.10"
|
||||
"@vue/compiler-dom" "3.0.0-rc.12"
|
||||
"@vue/runtime-dom" "3.0.0-rc.12"
|
||||
"@vue/shared" "3.0.0-rc.12"
|
||||
|
||||
w3c-hr-time@^1.0.1:
|
||||
version "1.0.2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user