ai.touchui-vue 1.32.0 → 1.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ai.touchui-vue",
-	"version": "1.32.0",
+	"version": "1.32.2",
 	"description": "TouchUI Component Library for Vue.js.",
 	"main": "lib/ai.touchui-vue.common.js",
 	"files": [

package/packages/float/src/main.vue

@@ -10,6 +10,10 @@
 export default {
 	name: 'ToFloat',
 	props: {
+		color: {
+			type: String,
+			default: ''
+		},
 		slide: Boolean,
 		lazy: {
 			type: Boolean,
@@ -75,6 +79,15 @@ export default {
 		beforeClose: {
 			type: Function,
 			default: null
+		},
+		// 偏移量
+		dx: {
+			type: [String, Number],
+			default: 0
+		},
+		dy: {
+			type: [String, Number],
+			default: 0
 		}
 	},
 	data() {
@@ -97,6 +110,9 @@ export default {
 			if (this.show) {
 				arr.push('to-float-show')
 			}
+			if (this.color) {
+				arr.push(`to-float-color-${this.color}`)
+			}
 			if (this.slide) {
 				arr.push('to-float-slide')
 			} else {
@@ -273,6 +289,8 @@ export default {
 						let leftSpace; // 左侧空间宽度
 						let rightSpace; // 右侧空间宽度
 						let useSpace // 使用的空间高度
+						let dx = Number(this.dx) * this.$TouchUI.em() // 横坐标偏移
+						let dy = Number(this.dy) * this.$TouchUI.em() // 纵坐标偏移
 
 						// 传入的是触点
 						if (link.clientX || link.touches) {
@@ -349,35 +367,38 @@ export default {
 						// 设置显示位置
 						if (this.iposition === 'top') {
 							this.$el.style.top = ''
-							this.$el.style.bottom = bottomSpace + linkHeight - 1 + 'px'
+							this.$el.style.bottom = bottomSpace + linkHeight - 1 - dy + 'px'
 						}
 						if (this.iposition === 'bottom') {
-							this.$el.style.top = topSpace + linkHeight - 1 + 'px'
+							this.$el.style.top = topSpace + linkHeight - 1 + dy + 'px'
 							this.$el.style.bottom = ''
 						}
 						if (this.iposition === 'top' || this.iposition === 'bottom') {
 							if (this.ialign === 'left') {
-								this.$el.style.left = leftSpace + 'px'
+								this.$el.style.left = leftSpace + dx + 'px'
+								this.$el.style.right = ''
+							} else if (this.ialign === 'center') {
+								this.$el.style.left = leftSpace - contentWidth / 2 + linkWidth / 2 + 'px'
 								this.$el.style.right = ''
 							} else {
-								this.$el.style.right = rightSpace + 'px'
+								this.$el.style.right = rightSpace - dx + 'px'
 								this.$el.style.left = ''
 							}
 						}
 						if (this.iposition === 'left') {
-							this.$el.style.right = rightSpace + linkWidth - 1 + 'px'
+							this.$el.style.right = rightSpace + linkWidth - dx - 1 + 'px'
 							this.$el.style.left = ''
 						}
 						if (this.iposition === 'right') {
-							this.$el.style.left = leftSpace + linkWidth - 1 + 'px'
+							this.$el.style.left = leftSpace + linkWidth + dx - 1 + 'px'
 							this.$el.style.right = ''
 						}
 						if (this.iposition === 'left' || this.iposition === 'right') {
 							if (this.ialign === 'bottom') {
 								this.$el.style.top = ''
-								this.$el.style.bottom = bottomSpace + 'px'
+								this.$el.style.bottom = bottomSpace - dy + 'px'
 							} else {
-								this.$el.style.top = topSpace + 'px'
+								this.$el.style.top = topSpace + dy + 'px'
 								this.$el.style.bottom = ''
 							}
 						}

package/packages/tab/src/tab-item.vue

@@ -33,7 +33,8 @@ export default {
 			default: ''
 		},
 		lazy: Boolean,
-		on: Boolean
+		on: Boolean,
+		disabled: Boolean
 	},
 	data() {
 		return {
@@ -49,8 +50,8 @@ export default {
 			}
 		},
 		listenChange() {
-			const { value, label, icon, deletable, number, pic, on, data } = this;
-			return { value, label, icon, deletable, number, pic, on, data };
+			const { value, label, icon, deletable, number, pic, on, data, disabled } = this;
+			return { value, label, icon, deletable, number, pic, on, data, disabled };
 		}
 	},
 	watch: {
@@ -78,7 +79,7 @@ export default {
 				if (this.$parent.data.length === 0) {
 					this.$parent.generateTabsFromSubTabItem();
 				}
-			});
+			})
 		}
 	}
 };

package/packages/tab/src/tab.vue

@@ -7,7 +7,10 @@
 			<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')">
+						<li v-if="$slots.center && Math.floor(itabs.length / 2) === index" :key="index" class="center">
+							<slot name="center"></slot>
+						</li>
+						<li v-else :key="index" :style="setTabStyle(item)" :class="{ on: item.value === iValue, deletable, disabled: item.disabled}" @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">
@@ -30,11 +33,11 @@
 				</ul>
 			</div>
 			<div v-if="$slots.fn || overSize" class="fn">
-				<template v-if="position==='top'&&tabOver === 'control'&&overSize && !$phone">
+				<template v-if="(position==='top' || position === 'bottom')&&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">
+				<template v-if="(position==='top' || position === 'bottom')&&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>
@@ -158,7 +161,6 @@ export default {
 			tabs: [],
 			em: 0,
 			moreTabs: [],
-			timestamp: 0,
 			currentUlWidth: 0
 		};
 	},
@@ -173,10 +175,6 @@ export default {
 					return {
 						width: this.tabWidth + 'em'
 					}
-				} else if (item.label) {
-					// return {
-					// 	width: item.label.length*2 + 'em'
-					// };
 				} else {
 					return '';
 				}
@@ -281,12 +279,7 @@ export default {
 
 			// 点击层外关闭
 			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') {
@@ -390,6 +383,7 @@ export default {
 		},
 		changeTab(item, index, event) {
 			if (event === 'click') {
+				if (item.disabled) return
 				this.$emit('tab-click', item.value, item, index)
 			}
 			if (event === 'mouseover') {
@@ -529,7 +523,7 @@ export default {
 			tabsItem.map(({ componentOptions = { propsData: {} } }) => {
 				const {
 					tag,
-					propsData: { label, value, icon, pic, number, on, data }
+					propsData: { label, value, icon, pic, number, on, data, disabled}
 				} = componentOptions;
 				if (String(tag) === 'to-tab-item') {
 					tabs.push({
@@ -538,7 +532,8 @@ export default {
 						icon,
 						pic,
 						number,
-						data
+						data,
+						disabled: disabled !== undefined
 					});
 				}
 				if (on === '' || on === true) {