modify: 优化 current 值的更新

yecao007 · Nov 11, 2018 · 6238ffb · 6238ffb
1 parent 350e668
commit 6238ffb
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/examples/hello-uniapp/components/segmented-control.vue b/examples/hello-uniapp/components/segmented-control.vue
@@ -1,7 +1,7 @@
 <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 === current ? activeStyle : itemStyle"
-		    @click="onClick(index)">
+		<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>
@@ -30,6 +30,18 @@
 				default: 'button'
 			}
 		},
+		data() {
+			return {
+				currentIndex: this.current
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val;
+				}
+			}
+		},
 		computed: {
 			wrapStyle() {
 				let styleString = '';
@@ -70,8 +82,8 @@
 		},
 		methods: {
 			onClick(index) {
-				if (this.current !== index) {
-					this.current = index;
+				if (this.currentIndex !== index) {
+					this.currentIndex = index;
 					this.$emit('clickItem', index);
 				}
 			}
@@ -98,7 +110,7 @@
 
 	.segmented-control.text {
 		border: 0;
-        border-radius: 0upx;
+		border-radius: 0upx;
 	}
 
 
@@ -120,4 +132,4 @@
 	.segmented-control-item:first-child {
 		border-left-width: 0;
 	}
-</style>
+</style>