初始化代码

uniapp/uni-app/components/uni-segmented-control.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="segmented-control" :class="styleType" :style="wrapStyle">
+		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index"
+			:style="index === currentIndex ? activeStyle : itemStyle" @click="onClick(index)">
+			{{item.title}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'uni-segmented-control',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#007aff'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			},
+			haveBorder: {
+				type: Boolean,
+				default () {
+					return false
+				}
+			},
+			lockTap: {
+				type: Boolean,
+				default () {
+					return true
+				}
+			}
+		},
+		data() {
+			return {
+				currentIndex: this.current
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val;
+				}
+			}
+		},
+		computed: {
+			wrapStyle() {
+				let styleString = '';
+				switch (this.styleType) {
+					case 'text':
+						styleString = `border:0;`;
+						break;
+					default:
+						styleString = this.haveBorder ? `border: 1rpx solid ${this.activeColor};` : ``;
+						break;
+				}
+				return styleString;
+			},
+			itemStyle() {
+				let styleString = '';
+				switch (this.styleType) {
+					case 'text':
+						styleString = `color:#000;border-left:0;`;
+						break;
+					default:
+						styleString = `color:#222;background:#eddbba;border-color:#fff;`;
+						break;
+				}
+				return styleString;
+			},
+			activeStyle() {
+				let styleString = '';
+				switch (this.styleType) {
+					case 'text':
+						styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;`;
+						break;
+					default:
+						styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
+						break;
+				}
+				return styleString;
+			}
+		},
+		methods: {
+			onClick(index) {
+				let {
+					lockTap,
+					currentIndex
+				} = this
+				console.log(lockTap, currentIndex);
+				if (currentIndex !== index || !lockTap) {
+					this.currentIndex = index;
+					this.$emit('clickItem', index);
+				}
+			}
+		},
+	}
+</script>
+
+<style>
+	.segmented-control {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		font-size: 26rpx;
+		border-radius: 5rpx;
+		box-sizing: border-box;
+		margin: 0 auto;
+		overflow: hidden;
+	}
+
+	.segmented-control.button {
+		border-radius: 54rpx;
+		box-sizing: border-box;
+	}
+
+	.segmented-control.text {
+		border: 0;
+		border-radius: 0rpx;
+	}
+
+
+	.segmented-control-item {
+		flex: 1;
+		text-align: center;
+		line-height: 54rpx;
+		box-sizing: border-box;
+	}
+
+	.segmented-control-item.button {
+		border-left: 1upx solid;
+	}
+
+	.segmented-control-item.button:first-child {
+		border-radius: 54rpx 0 0 54rpx;
+	}
+
+	.segmented-control-item.button:last-child {
+		border-radius: 0 54rpx 54rpx 0;
+	}
+
+	.segmented-control-item.text {
+		border-left: 0;
+	}
+
+	.segmented-control-item:first-child {
+		border-left-width: 0;
+	}
+</style>