ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 01:17:15 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

directory adjust: delete entry index.js

Browse Source
This commit is contained in:
陈嘉涵
2017-08-22 17:52:16 +08:00
parent 707b48aa61
commit c494292e3f
88 changed files with 587 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tab/index.js
View File

@@ -1,2 +0,0 @@
import Tab from './src/tab';
export default Tab;

36
packages/tab/index.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="van-tab__pane" :class="classNames">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-tab',
props: {
// 选项卡头显示文字
title: {
type: String,
required: true
},
disabled: Boolean
},
data() {
const nextIndex = this.$parent.tabs.length;
this.$parent.tabs.push({
title: this.title,
disabled: this.disabled,
index: nextIndex
});
return {
key: nextIndex
};
},
computed: {
classNames() {
return { 'van-tab__pane--select': this.key === this.$parent.curActive };
}
}
};
</script>

46
packages/tab/src/swipe.js
View File

@@ -1,46 +0,0 @@
import Vue from 'vue';
let isSwiping = false;
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
export default function(element, options) {
const moveFn = function(event) {
if (options.drag) {
options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
};
const endFn = function(event) {
if (!supportTouch) {
document.removeEventListener('mousemove', moveFn);
document.removeEventListener('mouseup', endFn);
}
isSwiping = false;
if (options.end) {
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
};
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
if (isSwiping) return;
if (!supportTouch) {
document.addEventListener('mousemove', moveFn);
document.addEventListener('mouseup', endFn);
}
isSwiping = true;
if (options.start) {
options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
});
if (supportTouch) {
element.addEventListener('touchmove', moveFn);
element.addEventListener('touchend', endFn);
element.addEventListener('touchcancel', endFn);
}
};

36
packages/tab/src/tab.vue
View File

@@ -1,36 +0,0 @@
<template>
<div class="van-tab__pane" :class="classNames">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-tab',
props: {
// 选项卡头显示文字
title: {
type: String,
required: true
},
disabled: Boolean
},
data() {
const nextIndex = this.$parent.tabs.length;
this.$parent.tabs.push({
title: this.title,
disabled: this.disabled,
index: nextIndex
});
return {
key: nextIndex
};
},
computed: {
classNames() {
return { 'van-tab__pane--select': this.key === this.$parent.curActive };
}
}
};
</script>

214
packages/tab/src/tabs.vue
View File

@@ -1,214 +0,0 @@
<template>
<div class="van-tabs" :class="[`van-tabs--${type}`]">
<div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > 4">
<div class="van-tabs__swipe" ref="swipe">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav-bar" :style="navBarStyle"></div>
<div
v-for="(tab, index) in tabs"
:key="index"
class="van-tab"
:class="{'van-tab--active': index === curActive}"
ref="tabkey"
@click="handleTabClick(index, tab)"
>
{{ tab.title }}
</div>
</div>
</div>
</div>
<div
v-else
class="van-tabs__nav"
:class="[`van-tabs__nav--${this.type}`]"
>
<div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
<div
v-for="(tab, index) in tabs"
:key="index"
class="van-tab"
:class="{'van-tab--active': index === curActive}"
ref="tabkey"
@click="handleTabClick(index, tab)"
>
{{ tab.title }}
</div>
</div>
<div class="van-tabs__content">
<slot></slot>
</div>
</div>
</template>
<script>
import swipe from './swipe';
import translateUtil from '../../utils/transition';
export default {
name: 'van-tabs',
props: {
// 外部传入的激活的tab标签
active: {
type: [Number, String],
default: 0
},
// 是默认的line还是card
type: {
type: String,
default: 'line'
},
// 切换tab的动画时间
duration: {
type: Number,
default: 0.3
}
},
data() {
return {
tabs: [],
isReady: false,
curActive: +this.active,
isSwiping: false
};
},
watch: {
active(val) {
this.curActive = +val;
},
curActive() {
/* istanbul ignore else */
if (this.tabs.length > 4) {
this.doOnValueChange();
}
}
},
computed: {
/**
* `type`为`line`时，tab下方的横线的样式
*/
navBarStyle() {
if (!this.isReady || this.type !== 'line' || !this.$refs.tabkey) return;
const tabKey = this.curActive;
const elem = this.$refs.tabkey[tabKey];
const offsetWidth = `${elem.offsetWidth || 0}px`;
const offsetLeft = `${elem.offsetLeft || 0}px`;
return {
width: offsetWidth,
transform: `translate3d(${offsetLeft}, 0, 0)`,
transitionDuration: `${this.duration}s`
};
},
swipeWidth() {
return this.$refs.swipe && this.$refs.swipe.getBoundingClientRect().width;
},
maxTranslate() {
/* istanbul ignore if */
if (!this.$refs.tabkey) return;
const lastTab = this.$refs.tabkey[this.tabs.length - 1];
const lastTabWidth = lastTab.offsetWidth;
const lastTabOffsetLeft = lastTab.offsetLeft;
return (lastTabOffsetLeft + lastTabWidth) - this.swipeWidth;
}
},
mounted() {
// 页面载入完成
this.$nextTick(() => {
// 可以开始触发在computed中关于nav-bar的css动画
this.isReady = true;
this.initEvents();
if (this.tabs.length > 4) {
this.doOnValueChange();
}
});
},
methods: {
/**
* tab点击事件
*
* @param {number} index tab在tabs中的索引
* @param {Object} el tab的vue实例
*/
handleTabClick(index, el) {
if (el.disabled) {
this.$emit('disabled', index);
return;
}
this.$emit('click', index);
this.curActive = index;
},
/**
* 将当前value值转换为需要translate的值
*/
value2Translate(value) {
/* istanbul ignore if */
if (!this.$refs.tabkey) return 0;
const tab = this.$refs.tabkey[value];
const maxTranslate = this.maxTranslate;
const tabWidth = tab.offsetWidth;
const tabOffsetLeft = tab.offsetLeft;
let translate = tabOffsetLeft + (tabWidth * 2.7) - this.swipeWidth;
if (translate < 0) {
translate = 0;
}
return -1 * (translate > maxTranslate ? maxTranslate : translate);
},
initEvents() {
const el = this.$refs.swipe;
if (!el) return;
let swipeState = {};
swipe(el, {
start: event => {
swipeState = {
start: new Date(),
startLeft: event.pageX,
startTranslateLeft: translateUtil.getElementTranslate(el).left
};
},
drag: event => {
this.isSwiping = true;
swipeState.left = event.pageX;
const deltaX = swipeState.left - swipeState.startLeft;
const translate = swipeState.startTranslateLeft + deltaX;
/* istanbul ignore else */
if (translate > 0 || (translate * -1) > this.maxTranslate ) return;
translateUtil.translateElement(el, translate, null);
},
end: () => {
this.isSwiping = false;
}
})
},
doOnValueChange() {
const value = +this.curActive;
const swipe = this.$refs.swipe;
translateUtil.translateElement(swipe, this.value2Translate(value), null);
}
}
};
</script>