统一顶部分段器命名

examples/hello-uniapp/components/segmented-control.vue

@@ -103,33 +103,32 @@
 		margin: 0 auto;
 		overflow: hidden;
 	}
-
+	
 	.segmented-control.button {
 		border: 1upx solid;
 	}
-
+	
 	.segmented-control.text {
 		border: 0;
 		border-radius: 0upx;
 	}
-
-
+	
 	.segmented-control-item {
 		flex: 1;
 		text-align: center;
 		line-height: 70upx;
 		box-sizing: border-box;
 	}
-
+	
 	.segmented-control-item.button {
 		border-left: 1upx solid;
 	}
-
+	
 	.segmented-control-item.text {
 		border-left: 0;
 	}
-
+	
 	.segmented-control-item:first-child {
 		border-left-width: 0;
 	}
-</style>
+</style>

examples/hello-uniapp/components/uni-segmented-control.vue

+<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}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'segmented-control',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#007aff'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		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 = `border-color: ${this.activeColor}`;
+						break;
+				}
+				return styleString;
+			},
+			itemStyle() {
+				let styleString = '';
+				switch (this.styleType) {
+					case 'text':
+						styleString = `color:#000;border-left:0;`;
+						break;
+					default:
+						styleString = `color:${this.activeColor};border-color:${this.activeColor};`;
+						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) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index;
+					this.$emit('clickItem', index);
+				}
+			}
+		},
+	}
+</script>
+
+<style>
+	.segmented-control {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		width: 100%;
+		font-size: 30upx;
+		border-radius: 12upx;
+		box-sizing: border-box;
+		margin: 0 auto;
+		overflow: hidden;
+	}
+
+	.segmented-control.button {
+		border: 1upx solid;
+	}
+
+	.segmented-control.text {
+		border: 0;
+		border-radius: 0upx;
+	}
+
+
+	.segmented-control-item {
+		flex: 1;
+		text-align: center;
+		line-height: 70upx;
+		box-sizing: border-box;
+	}
+
+	.segmented-control-item.button {
+		border-left: 1upx solid;
+	}
+
+	.segmented-control-item.text {
+		border-left: 0;
+	}
+
+	.segmented-control-item:first-child {
+		border-left-width: 0;
+	}
+</style>

examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue

 <template>
-	<view class="page">
+	<view>
 		<view class="uni-padding-wrap uni-common-mt">
-			<segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></segmented-control>
+			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
 		</view>
 		<view class="content">
 			<view v-show="current === 0">
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-	import segmentedControl from '../../../components/segmented-control.vue';
+	import uniSegmentedControl from '../../../components/uni-segmented-control.vue';
 
 	export default {
 		data() {
@@ -71,7 +71,7 @@
 			}
 		},
 		components: {
-			segmentedControl
+			uniSegmentedControl
 		},
 		methods: {
 			onClickItem(index) {
@@ -94,12 +94,6 @@
 </script>
 
 <style>
-	.head {
-		padding: 0 20upx;
-		margin-top: 20upx;
-		height: 100upx;
-	}
-
 	.content {
 		display: flex;
 		justify-content: center;
@@ -107,7 +101,6 @@
 		height: 300upx;
 		text-align: center;
 	}
-
 	.color-tag {
 		width: 50upx;
 		height: 50upx;