dreamland/lib/graceUI/weexComponents/graceSegmentedControl.nvue

<template>
	<view class="gui-segmented-Control" :style="{backgroundColor:bgColor}">
		<text class="gui-segmented-Control-item" v-for="(item, index) in items" :key="index" 
		:style="{
			height:height, lineHeight:height, color:currentIn == index ? '#FFFFFF' : color, 
			backgroundColor:currentIn == index ? color : bgColor, fontSize:fontSize}" @tap.stop="changeSC" :data-index="index">{{item}}</text>
	</view>
</template>
<script>
export default{
	props:{
		items : {
			type : Array,
			default : function () {
				return new Array()
			}
		},
		height : {
			type : String,
			default : '60rpx'
		},
		color : {
			type : String,
			default : '#3688FF'
		},
		fontSize : {
			type : String,
			default : '26rpx'
		},
		current : {
			type : Number,
			default : 0
		},
		bgColor : {
			type : String,
			default : '#F8F8F8'
		}
	},
	data() {
		return {
			currentIn: 0
		}
	},
	created: function(){
		this.currentIn = this.current;
	},
	watch:{
		current : function (val) {
			this.currentIn = val;
		}
	},
	methods:{
		changeSC:function (e) {
			var index = Number(e.currentTarget.dataset.index);
			this.currentIn = index;
			this.$emit('change', index);
		}
	}
}
</script>
<style scoped>
.gui-segmented-Control{flex-direction:row; flex-wrap:nowrap; background-color:#F5F6F8; border-radius:10rpx; padding:6rpx; flex:1;}
.gui-segmented-Control-item{width:700rpx; text-align:center; flex:1; border-radius:8rpx;}
</style>