ai.touchui-vue 1.31.3 → 1.32.0

package/packages/tab/src/tab.vue

@@ -1,599 +1,599 @@
-<template>
-	<div class="to-tab" :class="setClass" :style="setStyle">
-		<div ref="tab" class="tab">
-			<div v-if="title" class="title">
-				{{ title }}
-			</div>
-			<div ref="list" class="list">
-				<ul ref="ul" class="to-tab-ul" :style="setUlStyle" @mouseleave="taboutHandle" @mouseover="isOnTab = true">
-					<template v-for="(item, index) in itabs">
-						<li v-if="item.label" :key="index" :style="setTabStyle(item)" :class="{ on: item.value === iValue, deletable }" @click="changeTab(item, index, 'click')" @mouseover="changeTab(item, index, 'mouseover')">
-							<div class="content">
-								<slot name="item" :item="item">
-									<div v-if="item.pic" class="pic">
-										<to-pic :src="item.pic" :width="picWidth || 2"></to-pic>
-									</div>
-									<div v-if="item.icon" class="icon" :class="{ 'icon-single': !item.label }">
-										<to-icon :value="item.icon"></to-icon>
-									</div>
-									<div v-if="item.label" class="label">
-										<span class="text">{{ item.label }}</span>
-									</div>
-									<div v-if="item.number" class="number">
-										<to-tag v-size="'s'" color="danger" fillet="round" mode="plain">{{ item.number }}</to-tag>
-									</div>
-								</slot>
-							</div>
-							<span class="delete to-icon-close" @click.stop="removeTab(item, index)"><span></span></span>
-						</li>
-					</template>
-				</ul>
-			</div>
-			<div v-if="$slots.fn || overSize" class="fn">
-				<template v-if="position==='top'&&tabOver === 'control'&&overSize && !$phone">
-					<to-button v-dis="left >= 0" mode="none" color="primary" icon="back" fillet="normal" @mousedown.native="moveToLeft" @mouseout.native="moveStop" @mouseup.native="moveStop"></to-button>
-					<to-button v-dis="left <= dis * -1" mode="none" color="primary" icon="next" fillet="normal" @mousedown.native="moveToRight" @mouseout.native="moveStop" @mouseup.native="moveStop"></to-button>
-				</template>
-				<template v-if="position==='top'&&tabOver === 'float'&&overSize&&moreTabs.length">
-					<to-button ref="more" icon="unfold" color="primary" mode="none" fillet="normal" @click="$refs.float.toggle('more')"></to-button>
-				</template>
-				<slot name="fn"></slot>
-			</div>
-			<to-float ref="float" :lazy="false" :width="15" :slide="$phone" :position="$phone?'right':'auto'" align="right">
-				<to-scroll padding="0.5">
-					<to-grid type="v">
-						<to-grid-item v-for="(tab,index) in moreTabs" :key="index">
-							<to-card :color="tab.value === iValue?'primary':'default'" link @click="changeTab(tab, index, 'click'); $refs.float.close()">
-								<to-card-item type="main">
-									<to-ellipsis :data="tab.label"></to-ellipsis>
-								</to-card-item>
-								<to-card-item v-if="deletable"><to-icon value="close" link mode="none" fillet="round" @click.stop="deleteTab(tab.value, (tabs.length - moreTabs.length) + index)"></to-icon></to-card-item>
-							</to-card>
-						</to-grid-item>
-					</to-grid>
-				</to-scroll>
-			</to-float>
-		</div>
-		<div v-show="showPage" ref="page" class="to-tabPage" :class="setPageClass" @mouseover="isOnPage = true" @mouseleave="pageoutHandle">
-			<slot></slot>
-		</div>
-	</div>
-</template>
-<script>
-export default {
-	name: 'ToTab',
-	componentName: 'ToTab',
-	model: {
-		event: 'change'
-	},
-	props: {
-		event: {
-			type: String,
-			default: 'click'
-		},
-		data: {
-			type: [String, Array],
-			default() {
-				return [];
-			}
-		},
-		deletable: Boolean,
-		value: {
-			type: [String, Number],
-			default: ''
-		},
-		// tab 宽度
-		// avg 均分
-		// auto 自动
-		// [1-Max] 字符宽度
-		tabWidth: {
-			type: [String, Number],
-			default: 'auto'
-		},
-		picWidth: {
-			type: [String, Number],
-			default: ''
-		},
-		// sub：下划线
-		// sup：上划线
-		// pill：药丸
-		// card：卡片
-		// nav：导航
-		type: {
-			type: String,
-			default: ''
-		},
-		// float：悬浮
-		contentType: {
-			type: String,
-			default: ''
-		},
-		// top：顶部
-		// bottom：底部
-		// left：左侧
-		position: {
-			type: String,
-			default: 'top'
-		},
-		// auto：自动
-		// full：全屏
-		// 100；100em
-		height: {
-			type: [Number, String],
-			default: ''
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		tabOver: {
-			type: String,
-			default: 'control'
-		},
-		// 事件属性
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		// top：顶部
-		// left：左侧
-		iconPosition: {
-			type: String,
-			default: 'top'
-		}
-	},
-	data() {
-		return {
-			stopAvg: false,
-			dis: 0,
-			left: 0,
-			iValue: '',
-			setTitleClass: false,
-			overSize: false,
-			isOnTab: false,
-			isOnPage: false,
-			showPage: true,
-			controllerTimer: null,
-			changeTimer: null,
-			tabs: [],
-			em: 0,
-			moreTabs: [],
-			timestamp: 0,
-			currentUlWidth: 0
-		};
-	},
-	computed: {
-		itabs() {
-			let tabs = this.tabs
-			return this.tabOver === 'float' && this.overSize && this.moreTabs.length ? tabs.slice(0, tabs.length - this.moreTabs.length) : tabs
-		},
-		setTabStyle() {
-			return function(item) {
-				if (!isNaN(this.tabWidth) && !(this.tabOver === 'avg' && this.overSize)) {
-					return {
-						width: this.tabWidth + 'em'
-					}
-				} else if (item.label) {
-					// return {
-					// 	width: item.label.length*2 + 'em'
-					// };
-				} else {
-					return '';
-				}
-			}
-		},
-		setClass() {
-			let arr = [];
-			if (this.type) {
-				arr.push(`to-tab-type-${this.type}`);
-			} else {
-				arr.push('to-tab-type-default');
-			}
-			if (this.setTitleClass) {
-				arr.push('to-tab-title');
-			}
-			if (this.position && this.position !== 'top') {
-				arr.push(`to-tab-position-${this.position}`);
-			}
-			if (this.height === 'full') {
-				arr.push('to-tab-height-full');
-			}
-			if (this.tabWidth === 'avg' || this.type === 'nav') {
-				arr.push('to-tab-tab-width-avg');
-			}
-			if (this.tabOver === 'wrap') {
-				arr.push('to-tab-over-wrap')
-			}
-			if (this.tabOver === 'avg' && this.overSize) {
-				arr.push('to-tab-over-avg')
-			}
-			if (this.iconPosition === 'left') {
-				arr.push('to-tab-icon-position-left')
-			}
-			return arr;
-		},
-		setStyle() {
-			let obj = {}
-			if (this.height) {
-				if (!isNaN(this.height)) {
-					obj.height = this.height + 'em';
-				} else if (this.height === 'full') {
-					obj.height = '100%';
-				} else {
-					obj.height = this.height;
-				}
-			}
-			return obj
-		},
-		setUlStyle() {
-			let obj = {}
-			obj.transform = `translateX(${this.left}px)`
-			return obj
-		},
-		setPageClass() {
-			let arr = [];
-			if (this.contentType) {
-				arr.push(`to-tabPage-${this.contentType}`);
-			}
-			return arr;
-		}
-	},
-	watch: {
-		data: {
-			handler(val = []) {
-				if (typeof val === 'string') {
-					const tabs = []
-					const arr = val.split(',')
-					arr.map(item => {
-						tabs.push({
-							label: item,
-							value: item
-						})
-					})
-					this.tabs = tabs
-				} else {
-					val.length > 0 ? (this.tabs = JSON.parse(JSON.stringify(val))) : this.generateTabsFromSubTabItem();
-				}
-				if (this.tabs.length > 0) {
-					let timer = setTimeout(() => {
-						this.setController()
-						clearTimeout(timer)
-					}, 100);
-				}
-			},
-			deep: true,
-			immediate: true
-		},
-		value: {
-			handler(val) {
-				this.iValue = val
-				if (this.value === '' && this.contentType !== 'float' && this.tabs.length > 0) {
-					this.iValue = this.tabs[0].value
-				}
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		if (this.contentType === 'float') {
-			// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
-			document.body.appendChild(this.$refs.page)
-
-			// 点击层外关闭
-			document.body.addEventListener('click', this.blur)
-
-			// 默认隐藏 page
-			// this.showPage = false
-		}
-		this.em = this.$TouchUI.getRatio() * 12
-		this.timestamp = Math.round(new Date())
-	},
-	beforeDestroy() {
-		if (this.contentType === 'float') {
-
-			// 销毁事件绑定
-			document.body.removeEventListener('click', this.blur)
-
-			// 销毁移动过的 DOM
-			if (this.$refs.page.parentNode) {
-				this.$refs.page.parentNode.removeChild(this.$refs.page)
-			}
-		}
-	},
-	methods: {
-		// 保证 active 状态的 tabItem 处于可视范围
-		setActiveInView() {
-			if (this.overSize && this.tabOver === 'control') {
-				this.$nextTick(() => {
-					const object = this.findItemByx(this.itabs, this.iValue, 'value')
-					if (object) {
-						const ulList = this.$refs.ul.childNodes
-						if (ulList && ulList.length) {
-							const index = object._index
-							const li = ulList[index]
-							// 需要滚动的部分
-							if ((li.offsetLeft + li.offsetWidth) > this.$refs.list.offsetWidth) {
-								this.left = (li.offsetLeft - this.$refs.list.offsetWidth + li.offsetWidth) * -1
-							} else {
-								this.left = 0
-							}
-						}
-					}
-				})
-			}
-		},
-		setController() {
-			this.overSize = false
-			if (this.$refs.ul) {
-				this.$nextTick(()=>{
-					this.currentUlWidth = this.$refs.ul.offsetWidth
-					if (this.$refs.ul.offsetWidth > this.$refs.list.offsetWidth) {
-						this.overSize = true
-						this.left = 0
-						this.$nextTick(()=>{
-							this.dis = this.$refs.ul.offsetWidth - this.$refs.list.offsetWidth
-							if (this.left * -1 > this.dis && this.tabOver === 'control') {
-								this.left = this.dis * -1
-							}
-							// 使 active 状态的菜单，能够可视
-							this.setActiveInView()
-						})
-					} else {
-						this.overSize = false
-						this.dis = 0
-						this.left = 0
-						if (this.tabOver === 'float') {
-							this.$refs.float.close()
-						}
-					}
-					const offsetWidth = this.$refs.list.offsetWidth
-					const allLi = this.$refs.ul.getElementsByTagName('li')
-					let liWidth = 0
-					let liIndex = 0
-					try {
-						Array.prototype.slice.call(allLi).forEach((li, index) => {
-							liWidth += li.clientWidth
-							if (liWidth > offsetWidth) {
-								liIndex = index
-								throw Error()
-							}
-						})
-					} catch (err) {
-						this.moreTabs = this.tabs.slice(liIndex, this.tabs.length + 1)
-					}
-				})
-			}
-			if (!this.overSize && this.title) {
-				this.setTitleClass = true
-			} else {
-				this.setTitleClass = false
-			}
-		},
-		moveToLeft() {
-			this.controllerTimer = setInterval(()=>{
-				this.left += 100 * this.$TouchUI.em() / 12
-				if (this.left >= 0) {
-					this.left = 0
-				}
-			}, 50)
-		},
-		moveToRight() {
-			this.controllerTimer = setInterval(()=>{
-				this.left -= 100 * this.$TouchUI.em() / 12
-				if (this.left < this.dis * -1) {
-					this.left = this.dis * -1
-				}
-			}, 50)
-		},
-		moveStop() {
-			clearInterval(this.controllerTimer)
-		},
-		changeTab(item, index, event) {
-			if (event === 'click') {
-				this.$emit('tab-click', item.value, item, index)
-			}
-			if (event === 'mouseover') {
-				this.$emit('tab-mouseover', item.value, item, index)
-			}
-			if (this.event !== event) return // md-loader 不支持动态事件，只能出此下策
-			if (this.beforeChange) {
-				const fn = this.beforeChange(item, index, event)
-				// 如果是异步
-				if (fn && fn.then) {
-					fn.then(flag => {
-						this.changeAction(item, index, event)
-					}).catch((e)=>{})
-				} else {
-					// 是同步方法，则返回为 true 执行
-					if (fn) {
-						this.changeAction(item, index, event)
-					}
-				}
-			} else {
-				this.changeAction(item, index, event)
-			}
-		},
-		changeAction(item, index, event) {
-			const timer = this.event === 'mouseover' ? 200 : 0 // 跨越式标签切换和鼠标往斜下方移动时避免触发
-			clearInterval(this.changeTimer)
-			this.changeTimer = setTimeout(()=>{
-				if (this.contentType === 'float') {
-					if (item.value === this.iValue) {
-						if (this.event === 'click') {
-							this.showPage = false
-							this.iValue = ''
-							this.$emit('change', '');
-						}
-					} else {
-						this.iValue = item.value
-						this.$emit('change', item.value, item, index);
-					}
-					this.showPage = true
-
-					if (this.event === 'mouseover') {
-						this.showPage = true
-						this.iValue = item.value
-						this.$emit('change', item.value, item, index);
-					}
-
-					// 控制层的位置
-					this.$refs.page.style.top = this.$refs.tab.getBoundingClientRect().top + this.$refs.tab.offsetHeight + 'px'
-				} else {
-					if (item.value !== this.iValue) {
-						this.iValue = item.value
-						this.$emit('change', item.value, item, index);
-					}
-				}
-				clearTimeout(this.changeTimer)
-				this.changeTimer = null
-			}, timer)
-		},
-		deleteTab(value, by) {
-			if (!this.deletable) {
-				return
-			}
-			let tabs = this.tabs
-			let item = null
-			let _index = null
-			let obj = null
-			if (by === 'label') { // by===label
-				obj = this.findItemByx(tabs, value, 'label')
-			} else if (by === 'value') { // by===value
-				obj = this.findItemByx(tabs, value, 'value')
-			} else if (by === 'index') { // by===index
-				obj = this.findItemByx(tabs, value, 'index')
-			} else { // 不传by，默认按value查找
-				obj = this.findItemByx(tabs, value, 'value')
-				if (obj && obj.item === null && obj._index === null && typeof value === 'string') { // value未找到判断typeof如果是string按label查找
-					obj = this.findItemByx(tabs, value, 'label')
-				} else if (obj && obj.item === null && obj._index === null && typeof value === 'number') { // value未找到判断typeof如果是number按index查找
-					obj = this.findItemByx(tabs, value, 'index')
-				}
-			}
-			item = obj.item
-			_index = obj._index
-			if (item !== null && _index !== null) {
-				this.removeTab(item, _index)
-			}
-		},
-		findItemByx(tabs, value, by) {
-			let item = null
-			let _index = null
-			if (by === 'label') { // by===label
-				for (let i = 0; i < tabs.length; i++) {
-					if (tabs[i].label === value) {
-						item = tabs[i]
-						_index = i
-						break
-					}
-				}
-			} else if (by === 'value') { // by===value
-				for (let i = 0; i < tabs.length; i++) {
-					if (tabs[i].value === value) {
-						item = tabs[i]
-						_index = i
-						break
-					}
-				}
-			} else if (by === 'index') { // by===index
-				for (let i = 0; i < tabs.length; i++) {
-					if (i === value) {
-						item = tabs[i]
-						_index = i
-						break
-					}
-				}
-			}
-			return {
-				item: item,
-				_index: _index
-			}
-		},
-		removeTab(item, index) {
-			// 如果删除的是当前项，设置其他为当前项
-			this.$emit('before-delete', item, index)
-			if (this.value === item.value && this.tabs.length > 1) {
-				if (index === 0) {
-					this.$emit('change', this.tabs[1].value, this.tabs[1], 1)
-				} else {
-					this.$emit('change', this.tabs[index - 1].value, this.tabs[index - 1], index - 1)
-				}
-			}
-			this.tabs.splice(index, 1)
-			this.setController()
-			this.$emit('delete', item, index)
-		},
-		generateTabsFromSubTabItem() {
-			const tabs = [];
-			const tabsItem = this.$slots.default || [];
-			tabsItem.map(({ componentOptions = { propsData: {} } }) => {
-				const {
-					tag,
-					propsData: { label, value, icon, pic, number, on, data }
-				} = componentOptions;
-				if (String(tag) === 'to-tab-item') {
-					tabs.push({
-						label,
-						value: value ? value : label,
-						icon,
-						pic,
-						number,
-						data
-					});
-				}
-				if (on === '' || on === true) {
-					if (value) {
-						this.iValue = value
-					} else {
-						this.iValue = label
-					}
-				}
-			});
-			this.tabs = tabs;
-			setTimeout(() => {
-				this.setController()
-			}, 100)
-		},
-		hidePage() {
-			this.showPage = false
-		},
-		taboutHandle() {
-			this.isOnTab = false;
-			clearInterval(this.changeTimer)
-			let timer = null
-			timer = setTimeout(() => {
-				if (!this.isOnPage && !this.isOnTab && this.contentType === 'float' && this.event === 'mouseover') {
-					this.$emit('change', '')
-					this.iValue = ''
-				}
-				clearTimeout(timer)
-				timer = null
-			}, 1);
-		},
-		pageoutHandle() {
-			this.isOnPage = false;
-			let timer = null
-			timer = setTimeout(() => {
-				if (!this.isOnPage && !this.isOnTab && this.contentType === 'float' && this.event === 'mouseover') {
-					this.$emit('change', '')
-					this.iValue = ''
-				}
-				clearTimeout(timer)
-				timer = null
-			}, 1);
-		},
-		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
-		blur(e) {
-			if (!this.showPage) return false
-			let node = e.target
-			while (node && node !== this.$el && node !== this.$refs.page && node.nodeName !== 'BODY') {
-				node = node.parentNode
-			}
-			if (node && node.nodeName === 'BODY') {
-				this.showPage = false
-				this.$emit('change', '');
-			}
-		}
-	}
-};
-</script>
+<template>
+	<div class="to-tab" :class="setClass" :style="setStyle">
+		<div ref="tab" class="tab">
+			<div v-if="title" class="title">
+				{{ title }}
+			</div>
+			<div ref="list" class="list">
+				<ul ref="ul" class="to-tab-ul" :style="setUlStyle" @mouseleave="taboutHandle" @mouseover="isOnTab = true">
+					<template v-for="(item, index) in itabs">
+						<li v-if="item.label" :key="index" :style="setTabStyle(item)" :class="{ on: item.value === iValue, deletable }" @click="changeTab(item, index, 'click')" @mouseover="changeTab(item, index, 'mouseover')">
+							<div class="content">
+								<slot name="item" :item="item">
+									<div v-if="item.pic" class="pic">
+										<to-pic :src="item.pic" :width="picWidth || 2"></to-pic>
+									</div>
+									<div v-if="item.icon" class="icon" :class="{ 'icon-single': !item.label }">
+										<to-icon :value="item.icon"></to-icon>
+									</div>
+									<div v-if="item.label" class="label">
+										<span class="text">{{ item.label }}</span>
+									</div>
+									<div v-if="item.number" class="number">
+										<to-tag v-size="'s'" color="danger" fillet="round" mode="plain">{{ item.number }}</to-tag>
+									</div>
+								</slot>
+							</div>
+							<span class="delete to-icon-close" @click.stop="removeTab(item, index)"><span></span></span>
+						</li>
+					</template>
+				</ul>
+			</div>
+			<div v-if="$slots.fn || overSize" class="fn">
+				<template v-if="position==='top'&&tabOver === 'control'&&overSize && !$phone">
+					<to-button v-dis="left >= 0" mode="none" color="primary" icon="back" fillet="normal" @mousedown.native="moveToLeft" @mouseout.native="moveStop" @mouseup.native="moveStop"></to-button>
+					<to-button v-dis="left <= dis * -1" mode="none" color="primary" icon="next" fillet="normal" @mousedown.native="moveToRight" @mouseout.native="moveStop" @mouseup.native="moveStop"></to-button>
+				</template>
+				<template v-if="position==='top'&&tabOver === 'float'&&overSize&&moreTabs.length">
+					<to-button ref="more" icon="unfold" color="primary" mode="none" fillet="normal" @click="$refs.float.toggle('more')"></to-button>
+				</template>
+				<slot name="fn"></slot>
+			</div>
+			<to-float ref="float" :lazy="false" :width="15" :slide="$phone" :position="$phone?'right':'auto'" align="right">
+				<to-scroll padding="0.5">
+					<to-grid type="v">
+						<to-grid-item v-for="(tab,index) in moreTabs" :key="index">
+							<to-card :color="tab.value === iValue?'primary':'default'" link @click="changeTab(tab, index, 'click'); $refs.float.close()">
+								<to-card-item type="main">
+									<to-ellipsis :data="tab.label"></to-ellipsis>
+								</to-card-item>
+								<to-card-item v-if="deletable"><to-icon value="close" link mode="none" fillet="round" @click.stop="deleteTab(tab.value, (tabs.length - moreTabs.length) + index)"></to-icon></to-card-item>
+							</to-card>
+						</to-grid-item>
+					</to-grid>
+				</to-scroll>
+			</to-float>
+		</div>
+		<div v-show="showPage" ref="page" class="to-tabPage" :class="setPageClass" @mouseover="isOnPage = true" @mouseleave="pageoutHandle">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ToTab',
+	componentName: 'ToTab',
+	model: {
+		event: 'change'
+	},
+	props: {
+		event: {
+			type: String,
+			default: 'click'
+		},
+		data: {
+			type: [String, Array],
+			default() {
+				return [];
+			}
+		},
+		deletable: Boolean,
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// tab 宽度
+		// avg 均分
+		// auto 自动
+		// [1-Max] 字符宽度
+		tabWidth: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		picWidth: {
+			type: [String, Number],
+			default: ''
+		},
+		// sub：下划线
+		// sup：上划线
+		// pill：药丸
+		// card：卡片
+		// nav：导航
+		type: {
+			type: String,
+			default: ''
+		},
+		// float：悬浮
+		contentType: {
+			type: String,
+			default: ''
+		},
+		// top：顶部
+		// bottom：底部
+		// left：左侧
+		position: {
+			type: String,
+			default: 'top'
+		},
+		// auto：自动
+		// full：全屏
+		// 100；100em
+		height: {
+			type: [Number, String],
+			default: ''
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		tabOver: {
+			type: String,
+			default: 'control'
+		},
+		// 事件属性
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		// top：顶部
+		// left：左侧
+		iconPosition: {
+			type: String,
+			default: 'left'
+		}
+	},
+	data() {
+		return {
+			stopAvg: false,
+			dis: 0,
+			left: 0,
+			iValue: '',
+			setTitleClass: false,
+			overSize: false,
+			isOnTab: false,
+			isOnPage: false,
+			showPage: true,
+			controllerTimer: null,
+			changeTimer: null,
+			tabs: [],
+			em: 0,
+			moreTabs: [],
+			timestamp: 0,
+			currentUlWidth: 0
+		};
+	},
+	computed: {
+		itabs() {
+			let tabs = this.tabs
+			return this.tabOver === 'float' && this.overSize && this.moreTabs.length ? tabs.slice(0, tabs.length - this.moreTabs.length) : tabs
+		},
+		setTabStyle() {
+			return function(item) {
+				if (!isNaN(this.tabWidth) && !(this.tabOver === 'avg' && this.overSize)) {
+					return {
+						width: this.tabWidth + 'em'
+					}
+				} else if (item.label) {
+					// return {
+					// 	width: item.label.length*2 + 'em'
+					// };
+				} else {
+					return '';
+				}
+			}
+		},
+		setClass() {
+			let arr = [];
+			if (this.type) {
+				arr.push(`to-tab-type-${this.type}`);
+			} else {
+				arr.push('to-tab-type-default');
+			}
+			if (this.setTitleClass) {
+				arr.push('to-tab-title');
+			}
+			if (this.position && this.position !== 'top') {
+				arr.push(`to-tab-position-${this.position}`);
+			}
+			if (this.height === 'full') {
+				arr.push('to-tab-height-full');
+			}
+			if (this.tabWidth === 'avg' || this.type === 'nav') {
+				arr.push('to-tab-tab-width-avg');
+			}
+			if (this.tabOver === 'wrap') {
+				arr.push('to-tab-over-wrap')
+			}
+			if (this.tabOver === 'avg' && this.overSize) {
+				arr.push('to-tab-over-avg')
+			}
+			if (this.iconPosition) {
+				arr.push('to-tab-icon-position-' + this.iconPosition)
+			}
+			return arr;
+		},
+		setStyle() {
+			let obj = {}
+			if (this.height) {
+				if (!isNaN(this.height)) {
+					obj.height = this.height + 'em';
+				} else if (this.height === 'full') {
+					obj.height = '100%';
+				} else {
+					obj.height = this.height;
+				}
+			}
+			return obj
+		},
+		setUlStyle() {
+			let obj = {}
+			obj.transform = `translateX(${this.left}px)`
+			return obj
+		},
+		setPageClass() {
+			let arr = [];
+			if (this.contentType) {
+				arr.push(`to-tabPage-${this.contentType}`);
+			}
+			return arr;
+		}
+	},
+	watch: {
+		data: {
+			handler(val = []) {
+				if (typeof val === 'string') {
+					const tabs = []
+					const arr = val.split(',')
+					arr.map(item => {
+						tabs.push({
+							label: item,
+							value: item
+						})
+					})
+					this.tabs = tabs
+				} else {
+					val.length > 0 ? (this.tabs = JSON.parse(JSON.stringify(val))) : this.generateTabsFromSubTabItem();
+				}
+				if (this.tabs.length > 0) {
+					let timer = setTimeout(() => {
+						this.setController()
+						clearTimeout(timer)
+					}, 100);
+				}
+			},
+			deep: true,
+			immediate: true
+		},
+		value: {
+			handler(val) {
+				this.iValue = val
+				if (this.value === '' && this.contentType !== 'float' && this.tabs.length > 0) {
+					this.iValue = this.tabs[0].value
+				}
+			},
+			immediate: true
+		}
+	},
+	mounted() {
+		if (this.contentType === 'float') {
+			// 把 DOM 结构放到 body:last-child 位置，避免被 overflow
+			document.body.appendChild(this.$refs.page)
+
+			// 点击层外关闭
+			document.body.addEventListener('click', this.blur)
+
+			// 默认隐藏 page
+			// this.showPage = false
+		}
+		this.em = this.$TouchUI.getRatio() * 12
+		this.timestamp = Math.round(new Date())
+	},
+	beforeDestroy() {
+		if (this.contentType === 'float') {
+
+			// 销毁事件绑定
+			document.body.removeEventListener('click', this.blur)
+
+			// 销毁移动过的 DOM
+			if (this.$refs.page.parentNode) {
+				this.$refs.page.parentNode.removeChild(this.$refs.page)
+			}
+		}
+	},
+	methods: {
+		// 保证 active 状态的 tabItem 处于可视范围
+		setActiveInView() {
+			if (this.overSize && this.tabOver === 'control') {
+				this.$nextTick(() => {
+					const object = this.findItemByx(this.itabs, this.iValue, 'value')
+					if (object) {
+						const ulList = this.$refs.ul.childNodes
+						if (ulList && ulList.length) {
+							const index = object._index
+							const li = ulList[index]
+							// 需要滚动的部分
+							if ((li.offsetLeft + li.offsetWidth) > this.$refs.list.offsetWidth) {
+								this.left = (li.offsetLeft - this.$refs.list.offsetWidth + li.offsetWidth) * -1
+							} else {
+								this.left = 0
+							}
+						}
+					}
+				})
+			}
+		},
+		setController() {
+			this.overSize = false
+			if (this.$refs.ul) {
+				this.$nextTick(()=>{
+					this.currentUlWidth = this.$refs.ul.offsetWidth
+					if (this.$refs.ul.offsetWidth > this.$refs.list.offsetWidth) {
+						this.overSize = true
+						this.left = 0
+						this.$nextTick(()=>{
+							this.dis = this.$refs.ul.offsetWidth - this.$refs.list.offsetWidth
+							if (this.left * -1 > this.dis && this.tabOver === 'control') {
+								this.left = this.dis * -1
+							}
+							// 使 active 状态的菜单，能够可视
+							this.setActiveInView()
+						})
+					} else {
+						this.overSize = false
+						this.dis = 0
+						this.left = 0
+						if (this.tabOver === 'float') {
+							this.$refs.float.close()
+						}
+					}
+					const offsetWidth = this.$refs.list.offsetWidth
+					const allLi = this.$refs.ul.getElementsByTagName('li')
+					let liWidth = 0
+					let liIndex = 0
+					try {
+						Array.prototype.slice.call(allLi).forEach((li, index) => {
+							liWidth += li.clientWidth
+							if (liWidth > offsetWidth) {
+								liIndex = index
+								throw Error()
+							}
+						})
+					} catch (err) {
+						this.moreTabs = this.tabs.slice(liIndex, this.tabs.length + 1)
+					}
+				})
+			}
+			if (!this.overSize && this.title) {
+				this.setTitleClass = true
+			} else {
+				this.setTitleClass = false
+			}
+		},
+		moveToLeft() {
+			this.controllerTimer = setInterval(()=>{
+				this.left += 100 * this.$TouchUI.em() / 12
+				if (this.left >= 0) {
+					this.left = 0
+				}
+			}, 50)
+		},
+		moveToRight() {
+			this.controllerTimer = setInterval(()=>{
+				this.left -= 100 * this.$TouchUI.em() / 12
+				if (this.left < this.dis * -1) {
+					this.left = this.dis * -1
+				}
+			}, 50)
+		},
+		moveStop() {
+			clearInterval(this.controllerTimer)
+		},
+		changeTab(item, index, event) {
+			if (event === 'click') {
+				this.$emit('tab-click', item.value, item, index)
+			}
+			if (event === 'mouseover') {
+				this.$emit('tab-mouseover', item.value, item, index)
+			}
+			if (this.event !== event) return // md-loader 不支持动态事件，只能出此下策
+			if (this.beforeChange) {
+				const fn = this.beforeChange(item, index, event)
+				// 如果是异步
+				if (fn && fn.then) {
+					fn.then(flag => {
+						this.changeAction(item, index, event)
+					}).catch((e)=>{})
+				} else {
+					// 是同步方法，则返回为 true 执行
+					if (fn) {
+						this.changeAction(item, index, event)
+					}
+				}
+			} else {
+				this.changeAction(item, index, event)
+			}
+		},
+		changeAction(item, index, event) {
+			const timer = this.event === 'mouseover' ? 200 : 0 // 跨越式标签切换和鼠标往斜下方移动时避免触发
+			clearInterval(this.changeTimer)
+			this.changeTimer = setTimeout(()=>{
+				if (this.contentType === 'float') {
+					if (item.value === this.iValue) {
+						if (this.event === 'click') {
+							this.showPage = false
+							this.iValue = ''
+							this.$emit('change', '');
+						}
+					} else {
+						this.iValue = item.value
+						this.$emit('change', item.value, item, index);
+					}
+					this.showPage = true
+
+					if (this.event === 'mouseover') {
+						this.showPage = true
+						this.iValue = item.value
+						this.$emit('change', item.value, item, index);
+					}
+
+					// 控制层的位置
+					this.$refs.page.style.top = this.$refs.tab.getBoundingClientRect().top + this.$refs.tab.offsetHeight + 'px'
+				} else {
+					if (item.value !== this.iValue) {
+						this.iValue = item.value
+						this.$emit('change', item.value, item, index);
+					}
+				}
+				clearTimeout(this.changeTimer)
+				this.changeTimer = null
+			}, timer)
+		},
+		deleteTab(value, by) {
+			if (!this.deletable) {
+				return
+			}
+			let tabs = this.tabs
+			let item = null
+			let _index = null
+			let obj = null
+			if (by === 'label') { // by===label
+				obj = this.findItemByx(tabs, value, 'label')
+			} else if (by === 'value') { // by===value
+				obj = this.findItemByx(tabs, value, 'value')
+			} else if (by === 'index') { // by===index
+				obj = this.findItemByx(tabs, value, 'index')
+			} else { // 不传by，默认按value查找
+				obj = this.findItemByx(tabs, value, 'value')
+				if (obj && obj.item === null && obj._index === null && typeof value === 'string') { // value未找到判断typeof如果是string按label查找
+					obj = this.findItemByx(tabs, value, 'label')
+				} else if (obj && obj.item === null && obj._index === null && typeof value === 'number') { // value未找到判断typeof如果是number按index查找
+					obj = this.findItemByx(tabs, value, 'index')
+				}
+			}
+			item = obj.item
+			_index = obj._index
+			if (item !== null && _index !== null) {
+				this.removeTab(item, _index)
+			}
+		},
+		findItemByx(tabs, value, by) {
+			let item = null
+			let _index = null
+			if (by === 'label') { // by===label
+				for (let i = 0; i < tabs.length; i++) {
+					if (tabs[i].label === value) {
+						item = tabs[i]
+						_index = i
+						break
+					}
+				}
+			} else if (by === 'value') { // by===value
+				for (let i = 0; i < tabs.length; i++) {
+					if (tabs[i].value === value) {
+						item = tabs[i]
+						_index = i
+						break
+					}
+				}
+			} else if (by === 'index') { // by===index
+				for (let i = 0; i < tabs.length; i++) {
+					if (i === value) {
+						item = tabs[i]
+						_index = i
+						break
+					}
+				}
+			}
+			return {
+				item: item,
+				_index: _index
+			}
+		},
+		removeTab(item, index) {
+			// 如果删除的是当前项，设置其他为当前项
+			this.$emit('before-delete', item, index)
+			if (this.value === item.value && this.tabs.length > 1) {
+				if (index === 0) {
+					this.$emit('change', this.tabs[1].value, this.tabs[1], 1)
+				} else {
+					this.$emit('change', this.tabs[index - 1].value, this.tabs[index - 1], index - 1)
+				}
+			}
+			this.tabs.splice(index, 1)
+			this.setController()
+			this.$emit('delete', item, index)
+		},
+		generateTabsFromSubTabItem() {
+			const tabs = [];
+			const tabsItem = this.$slots.default || [];
+			tabsItem.map(({ componentOptions = { propsData: {} } }) => {
+				const {
+					tag,
+					propsData: { label, value, icon, pic, number, on, data }
+				} = componentOptions;
+				if (String(tag) === 'to-tab-item') {
+					tabs.push({
+						label,
+						value: value ? value : label,
+						icon,
+						pic,
+						number,
+						data
+					});
+				}
+				if (on === '' || on === true) {
+					if (value) {
+						this.iValue = value
+					} else {
+						this.iValue = label
+					}
+				}
+			});
+			this.tabs = tabs;
+			setTimeout(() => {
+				this.setController()
+			}, 100)
+		},
+		hidePage() {
+			this.showPage = false
+		},
+		taboutHandle() {
+			this.isOnTab = false;
+			clearInterval(this.changeTimer)
+			let timer = null
+			timer = setTimeout(() => {
+				if (!this.isOnPage && !this.isOnTab && this.contentType === 'float' && this.event === 'mouseover') {
+					this.$emit('change', '')
+					this.iValue = ''
+				}
+				clearTimeout(timer)
+				timer = null
+			}, 1);
+		},
+		pageoutHandle() {
+			this.isOnPage = false;
+			let timer = null
+			timer = setTimeout(() => {
+				if (!this.isOnPage && !this.isOnTab && this.contentType === 'float' && this.event === 'mouseover') {
+					this.$emit('change', '')
+					this.iValue = ''
+				}
+				clearTimeout(timer)
+				timer = null
+			}, 1);
+		},
+		// 点击层外关闭，通过递归判断点击是否在绑定此对象实例的 DOM 之内
+		blur(e) {
+			if (!this.showPage) return false
+			let node = e.target
+			while (node && node !== this.$el && node !== this.$refs.page && node.nodeName !== 'BODY') {
+				node = node.parentNode
+			}
+			if (node && node.nodeName === 'BODY') {
+				this.showPage = false
+				this.$emit('change', '');
+			}
+		}
+	}
+};
+</script>