From cc657f98e383ed762fa05d44e0603ac99db5d0d8 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Wed, 14 Nov 2018 15:52:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=A1=B6=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=AE=B5=E5=99=A8=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/segmented-control.vue          |  15 +-
 .../components/uni-segmented-control.vue      | 134 ++++++++++++++++++
 .../segmented-control/segmented-control.vue   |  15 +-
 3 files changed, 145 insertions(+), 19 deletions(-)
 create mode 100644 examples/hello-uniapp/components/uni-segmented-control.vue

diff --git a/examples/hello-uniapp/components/segmented-control.vue b/examples/hello-uniapp/components/segmented-control.vue
index 6a4b55b25..0294a9afd 100644
--- a/examples/hello-uniapp/components/segmented-control.vue
+++ b/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>
diff --git a/examples/hello-uniapp/components/uni-segmented-control.vue b/examples/hello-uniapp/components/uni-segmented-control.vue
new file mode 100644
index 000000000..f2a417319
--- /dev/null
+++ b/examples/hello-uniapp/components/uni-segmented-control.vue
@@ -0,0 +1,134 @@
+<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>
diff --git a/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue b/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
index b0f512b94..c7024c378 100644
--- a/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
+++ b/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
@@ -1,7 +1,7 @@
 <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;
-- 
GitLab