Forráskód Böngészése

fix:修改筛选项样式

443166679@qq.com 1 éve
szülő
commit
2e9bcfe7b5
1 módosított fájl, 33 hozzáadás és 25 törlés
  1. 33 25
      components/en-utils/en-select/en-select.vue

+ 33 - 25
components/en-utils/en-select/en-select.vue

@@ -10,8 +10,9 @@
 		</view>
 		<view class="select">
 			<scroll-view scroll-y="true" class="scroll-Y select">
-				<view id="demo1" class="scroll-view-item" v-for="(item,index) in localData" @click="onSelect(index)">
-					<text class="size-28 color-0FB160">{{item[itemText]}}</text>
+				<view id="demo1" class="scroll-view-item" :class="item.id === current?'':'active'"
+					v-for="(item,index) in localData" @click="onSelect(index)">
+					<text class="size-28">{{item[itemText]}}</text>
 				</view>
 			</scroll-view>
 		</view>
@@ -29,40 +30,40 @@
 				type: String,
 				default: '选择'
 			},
-      localData: {
-        default: []
-      },
-      itemKey:{
-        type:String,
-        default:'id'
-      },
-      itemText:{
-        type:String,
-        default:'name'
-      },
-      value:{
-        default:''
-      }
+			localData: {
+				default: []
+			},
+			itemKey: {
+				type: String,
+				default: 'id'
+			},
+			itemText: {
+				type: String,
+				default: 'name'
+			},
+			value: {
+				default: ''
+			}
 		},
 		components: {
 			EnButton
 		},
 		data() {
 			return {
-				current: 0,
+				current: 3,
 			};
 		},
-    watch:{
-      'value':function () {
-        if(this.current!==this.value){
-          this.current=this.value
-        }
-      }
-    },
+		watch: {
+			'value': function() {
+				if (this.current !== this.value) {
+					this.current = this.value
+				}
+			}
+		},
 		methods: {
 			onSelect(index) {
 				this.$emit('onChange', index)
-        this.$emit('input', this.localData[index][this.itemKey])
+				this.$emit('input', this.localData[index][this.itemKey])
 			}
 		}
 	}
@@ -84,7 +85,14 @@
 		text-align: center;
 		background: rgba(15, 177, 96, 0.1);
 		border-radius: 10rpx;
+		color: #0FB160;
 		border: 1rpx solid #0FB160;
 		margin: 16rpx 30rpx;
 	}
+
+	.active {
+		border: none;
+		color: #333333;
+		background: #F7F9FE;
+	}
 </style>