You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.3 KiB
90 lines
2.3 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _touch = require("../mixins/touch");
|
|
|
|
var _createNamespace = (0, _utils.createNamespace)('tabs'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
var MIN_SWIPE_DISTANCE = 50;
|
|
|
|
var _default = createComponent({
|
|
mixins: [_touch.TouchMixin],
|
|
props: {
|
|
count: Number,
|
|
duration: [Number, String],
|
|
animated: Boolean,
|
|
swipeable: Boolean,
|
|
currentIndex: Number
|
|
},
|
|
computed: {
|
|
style: function style() {
|
|
if (this.animated) {
|
|
return {
|
|
transform: "translate3d(" + -1 * this.currentIndex * 100 + "%, 0, 0)",
|
|
transitionDuration: this.duration + "s"
|
|
};
|
|
}
|
|
},
|
|
listeners: function listeners() {
|
|
if (this.swipeable) {
|
|
return {
|
|
touchstart: this.touchStart,
|
|
touchmove: this.touchMove,
|
|
touchend: this.onTouchEnd,
|
|
touchcancel: this.onTouchEnd
|
|
};
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// watch swipe touch end
|
|
onTouchEnd: function onTouchEnd() {
|
|
var direction = this.direction,
|
|
deltaX = this.deltaX,
|
|
currentIndex = this.currentIndex;
|
|
/* istanbul ignore else */
|
|
|
|
if (direction === 'horizontal' && this.offsetX >= MIN_SWIPE_DISTANCE) {
|
|
/* istanbul ignore else */
|
|
if (deltaX > 0 && currentIndex !== 0) {
|
|
this.$emit('change', currentIndex - 1);
|
|
} else if (deltaX < 0 && currentIndex !== this.count - 1) {
|
|
this.$emit('change', currentIndex + 1);
|
|
}
|
|
}
|
|
},
|
|
genChildren: function genChildren() {
|
|
var h = this.$createElement;
|
|
|
|
if (this.animated) {
|
|
return h("div", {
|
|
"class": bem('track'),
|
|
"style": this.style
|
|
}, [this.slots()]);
|
|
}
|
|
|
|
return this.slots();
|
|
}
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
return h("div", {
|
|
"class": bem('content', {
|
|
animated: this.animated
|
|
}),
|
|
"on": (0, _extends2.default)({}, this.listeners)
|
|
}, [this.genChildren()]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default; |