自定义开关组建

public/appnew/src/components/publicEg/switch.vue

+<template>
+	<div>
+		<div class="left" @click="choose(0)" :style="{'background-color' : choosed ? ( selected ? '#FF8018' : '#f7f7f7' ) : '#f7f7f7','color' :choosed ? ( selected ? '#f7f7f7' : '#FF8018' ) : '#FF8018'} ">
+			{{data.str1}}
+		</div>
+		<div class="right" @click="choose(1)" :style="{'background-color' : choosed ? ( selected ? '#f7f7f7' : '#FF8018' ) : '#f7f7f7','color' :choosed ? ( selected ? '#FF8018' : '#f7f7f7' ) : '#FF8018'}">
+			{{data.str2}}
+			<!--<div style="width:.3rem; height:.3rem; border-radius : 50% ; background-color : red ;overflow:hidden ;margin:.1rem .1rem .1rem .1rem;float:right;"></div>-->
+		</div>
+	</div>
+</template>
+
+<script> 
+	export default {
+		props : {
+			data : {
+				type : Object ,
+				default : {
+					'str1':'是',
+					'str2':'否'
+				}
+			}
+		},
+		data : ()=> ({
+			selected : false ,
+			choosed : false ,
+		}),
+		methods : {
+			choose : function(status){
+				let that = this ; 
+				console.log("123")
+				that.choosed = true ;
+				that.selected = status == 0 ? true : false ;
+				this.$emit('swithchBack', that.selected ? 0 : 1 )
+			},
+		},
+		
+	}
+</script>
+
+<style scoped>
+	.left {
+		padding : 0rem .22rem;; 
+		height:.5rem ;
+		border-radius:.1rem 0rem 0rem .1rem ;
+		float:left;
+		line-height:.5rem;
+		text-align:center;
+		font-size:.23rem;
+		line-height:.55rem;
+	}
+	.right{
+		margin-left:1px;
+		padding : 0rem .22rem;; 
+		height:.5rem ;
+		border-radius:0rem .1rem .1rem 0rem ;
+		float:left;
+		line-height:.5rem;
+		text-align:center;
+		font-size:.23rem;
+		line-height:.55rem;
+	}
+	
+</style>
\ No newline at end of file