vue-slide-tab
Version:
vue slide tab for mobile
354 lines (336 loc) • 11.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.VueSlideTab = {}));
}(this, (function (exports) { 'use strict';
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
props: {
tabs: {
require: true,
type: Array
},
current: {
require: true,
type: Number
},
dir: {
type: String,
default: function () { return 'ltr'; }
}
},
data: function data() {
return {
tabWidth: 0,
minLeft: 0,
left: 0,
motion: false,
preX: 0,
wrapperWidth: 0
}
},
computed: {
dirFlag: function dirFlag() {
return this.dir === 'ltr' ? 1 : -1
},
tabStyle: function tabStyle() {
return this.tabWidth ? ("width: " + (this.tabWidth) + "px;") : ''
},
wrapperStyle: function wrapperStyle() {
var l = this.left * this.dirFlag + 'px';
return ("transform: translate3d(" + l + ", 0, 0);")
}
},
watch: {
current: function current(v) {
this.setCurrentTab(v);
}
},
mounted: function mounted() {
this.init();
this.setCurrentTab(this.current);
},
updated: function updated() {
this.init();
},
methods: {
init: function init() {
this.tabWidth = this.$el.offsetWidth;
this.wrapperWidth = this.$refs.wrapper.offsetWidth;
var diff = this.wrapperWidth - this.tabWidth;
this.minLeft = diff > 0 ? diff * -1 : 0;
},
setCurrentTab: function setCurrentTab(index) {
if (index >= 0 && index < this.tabs.length) {
var dom = this.$refs.wrapper.children[index];
if (dom) {
this.setLeftByDom(dom);
}
}
},
setLeftByDom: function setLeftByDom(dom) {
var pos = this.dir === 'rtl' ? (this.wrapperWidth - dom.offsetLeft - dom.offsetWidth / 2) : (dom.offsetLeft + dom.offsetWidth / 2);
var left = pos - this.tabWidth / 2;
if (left < 0) {
this.left = 0;
} else if (left > Math.abs(this.minLeft)) {
this.left = this.minLeft;
} else {
this.left = left * -1;
}
},
touchStart: function touchStart(e) {
this.motion = false;
this.preX = e.touches[0].pageX;
},
touchMove: function touchMove(e) {
var left = this.left + (e.touches[0].pageX - this.preX) * this.dirFlag;
if (left >= 0) {
this.left = 0;
} else if (left <= this.minLeft) {
this.left = this.minLeft;
} else {
this.left = left;
}
this.preX = e.touches[0].pageX;
},
touchEnd: function touchEnd() {
this.motion = true;
},
tabClick: function tabClick(e, index) {
this.motion = true;
this.setCurrentTab(index);
this.$emit('tabClick', index);
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) { return addStyle(id, style); };
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ staticClass: "slide-tab", style: _vm.tabStyle, attrs: { dir: _vm.dir } },
[
_c(
"div",
{
ref: "wrapper",
class: [_vm.motion ? "motion" : "", "tab-wrapper"],
style: _vm.wrapperStyle,
on: {
touchstart: _vm.touchStart,
touchmove: _vm.touchMove,
touchend: _vm.touchEnd
}
},
_vm._l(_vm.tabs, function(tab, index) {
return _c(
"div",
{
key: index,
staticClass: "tab-item",
on: {
click: function($event) {
return _vm.tabClick($event, index)
}
}
},
[_vm._t("tab", null, { tab: tab, index: index })],
2
)
}),
0
)
]
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-74787f30_0", { source: ".slide-tab {\n overflow: hidden;\n}\n.slide-tab .tab-wrapper {\n display: inline-block;\n white-space: nowrap;\n will-change: transform;\n}\n.slide-tab .tab-wrapper.motion {\n transition: all 0.3s;\n}\n.slide-tab .tab-wrapper .tab-item {\n vertical-align: top;\n box-sizing: border-box;\n display: inline-block;\n}\n", map: {"version":3,"sources":["VueSlideTab.vue"],"names":[],"mappings":"AAAA;EACE,gBAAgB;AAClB;AACA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,sBAAsB;AACxB;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,sBAAsB;EACtB,qBAAqB;AACvB","file":"VueSlideTab.vue","sourcesContent":[".slide-tab {\n overflow: hidden;\n}\n.slide-tab .tab-wrapper {\n display: inline-block;\n white-space: nowrap;\n will-change: transform;\n}\n.slide-tab .tab-wrapper.motion {\n transition: all 0.3s;\n}\n.slide-tab .tab-wrapper .tab-item {\n vertical-align: top;\n box-sizing: border-box;\n display: inline-block;\n}\n"]}, media: undefined });
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
var VueSlideTab = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
createInjector,
undefined,
undefined
);
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component('VueSlideTab', VueSlideTab);
}
var index = {
install: install,
component: VueSlideTab
};
exports.default = index;
Object.defineProperty(exports, '__esModule', { value: true });
})));