mobile_h5/actMgt/components/my-tab/my-tab.vue

<template>
	<view class="tab uni-row" :style="'font-size: ' + fontSize + 'px;'">
		<template v-for="(item,index) in tabItems" :key="index">
			<text v-if="typeof item == 'string'" :class="getClassList(index)" :style="getTextStyle(index)" @click="onTabClick(index)">{{item}}</text>
			<e-select v-if="typeof item == 'object'" :style="getSelectStyle()" v-model="item.selectValue" maxHeight="300px"
				:options="item.data" :search="false" :inputClick="false" :clearable="false" :class="getClassList(index)"
				@click="onTabClick(index)" @getText="getESelectText" @change="eSelectChange"></e-select>
		</template>
	</view>
</template>

<script>
	export default {
		name: "my-tab",
		props: {
			initActIndex: {
				type: Number,
				default: 0
			},
			tabItems: {
				type: Array,
				default: null
			},
			tabItemsMark: {
				type: Array,
				default: null
			},
			type: {
				type: Number,
				default: 0
			},
			fontSize: {
				type: Number,
				default: 16
			},
		},
		emits: ['onTabClick', 'onSelectChange'],
		data() {
			return {
				tabCurrent: 0,
				selectedID: 0
			};
		},
		mounted() {
			// console.log("initActIndex:" , this.initActIndex);
			// console.log("tabItems:" , this.tabItems);
			this.tabCurrent = this.initActIndex;
		},
		watch: {
            initActIndex(newVal, oldVal) {
				// console.log('initActIndex oldVal:', oldVal);
				// console.log('initActIndex newVal:', newVal);
				this.tabCurrent = newVal;
            }
        },
		methods: {
			getClassList(index) {
				// console.log("index:", index);
				let classList = "";
				if (this.tabCurrent == index) {
					classList = "tab-active";
					if (this.type == 1 && this.tabItems.length > 1) {
						if (index == 0) {
							classList += " boder-radius-left";
						} else if (index == (this.tabItems.length - 1)) {
							classList += " boder-radius-right";
						}
					} else {
						classList += " boder-radius-all";
					}
				} else {
					classList = "tab-unactive";
					if (this.type == 1) {
						if (index < (this.tabItems.length - 1)) {
							classList += " boder-solid-right";
						}
					}
				}
				// console.log("classList:", classList);
				return classList;
			},
			getTextStyle(index) {
				if (this.tabItemsMark == null || index > this.tabItemsMark.length - 1) {
					return;
				}
				
				let styleStr = "";
				const mark = this.tabItemsMark[index];
				if (mark.textColor.length > 0) {
					if (this.tabCurrent != index) {
						styleStr += "color: " + mark.textColor + ";";
						styleStr += "background: url('" + mark.icon + "') no-repeat;";
					} else {
						styleStr += "background: url('" + mark.icon + "') #2e85ec no-repeat;";
					}
					styleStr += "background-position-x: 90%;";
					styleStr += "background-position-y: 2%;";
					styleStr += "background-size: 14px;";
				}
				// console.log("getTextStyle: ", styleStr);
				return styleStr;
			},
			getSelectStyle() {
				let styleStr = "";
				// const len = this.tabItems.length;
				// if (len > 0) {
				// 	styleStr = "width: " + 100 / len + "%;";
				// }
				// console.log("getSelectStyle", styleStr);
				return styleStr;
			},
			onTabClick(index) {
				// console.log("onTabClick:", index);
				this.tabCurrent = index;
				this.$emit('onTabClick', index);
			},
			// 获取输入框中值
			getESelectText(data) {
				// console.log("getESelectText:", data);
			},
			// 获取选择选项值
			eSelectChange(data) {
				// console.log("eSelectChange:", data);
				this.$emit('onSelectChange', data);
			},
		}
	}
</script>

<style scoped>
	.tab {
		width: 90%;
		height: 60rpx;
		margin-top: 30rpx;
		background: #e7ecef;
		border-radius: 18px;
		justify-content: space-around;
		
		font-size: 16px;
		font-weight: 500;
		line-height: 60rpx;
		text-align: center;
	}

	.tab-active {
		width: 100%;
		height: 60rpx;
		background-color: #2e85ec;
		color: #ffffff;
	}

	.tab-unactive {
		width: 100%;
		height: 60rpx;
		color: #818181;
	}
	
	.tab-corner-mark {
		background-image: url('/static/common/award.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.boder-radius-all {
		border-radius: 18px;
	}

	.boder-radius-left {
		border-radius: 18px 0 0 18px;
	}

	.boder-radius-right {
		border-radius: 0 18px 18px 0;
	}

	.boder-solid-left {
		border-left: #d7d7d7 1px solid;
	}

	.boder-solid-right {
		border-right: #d7d7d7 1px solid;
	}

	/deep/ .e-select {
		border: none !important;
	}
	
	/deep/ .e-select-input-text {
		width: 90% !important;
		color: inherit !important;
		font-size: 14px !important;
	}
	
	/deep/ .e-select-selector-item {
		color: #818181;
	}
	
	/deep/ .e-select-selector .e-select-selector-scroll .highlight {
		color: #409eff !important;
	}
	
	/deep/ .uni-icons {
		color: inherit !important;
	}
	
	/deep/ .e-select-input-placeholder {
		color: inherit !important;
		font-size: 14px !important;
		line-height: 60rpx !important;
	}
	
	/deep/ .e-select-icon {
		/* width: 26px !important; */
		width: 10% !important;
	}
</style>