deming/pageB/components/sdetails/guige.vue

<template>
     <view class="guige">
        <view class="title">
            {{title}}
        </view>
        <view class="item">
            <text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
                {{i}}
            </text>
            <!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
            <!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
        </view>
    </view>
</template>
<style lang="scss" scoped>
    .guige{
            margin-top: 30rpx;
            padding-bottom: 30rpx;
            border-bottom: #ececec solid 2rpx;
            .title{
                font-size: 28rpx;
                color: #333;
                margin-bottom: 29rpx;

            }
            .item{
                display: flex;
                flex-wrap: wrap;
                >text{
                    min-width: 120rpx;
                    height: 60rpx;
                    background-color: #ececec;
                    color: #999;
                    // text-align: center;
                    // line-height: 60rpx;
                    box-sizing: border-box;
                    border-radius: 6rpx;
                    margin-right: 26rpx;
					margin-bottom: 20rpx;
					border: #ececec 1rpx solid;
					display: flex;
					align-items: center;
					justify-content: center;
                }
                .xuanzhong{
                    border: #ff780f 1rpx solid;
                    color: #FF780F;
                    background-color: #FFF1E6;
                }
            }
        }
</style>
<script>
export default {
    name:"guige",
    data(){
        return {
            select: 0
        }
    },
    props:['item','title', 'default'],
    watch: {
        select(){
            // console.log(this.select)
            this.$emit("sel", this.select);
        }
	},
	mounted() {
		this.setDefaultValue();
	},
	methods: {
		setDefaultValue() {
			for (const ikey in this.item) {
				if (this.item.hasOwnProperty(ikey)) {
					const ielement = this.item[ikey];
					for (const dkey in this.default) {
						if (this.default.hasOwnProperty(dkey)) {
							const delement = this.default[dkey];
							if(ikey == dkey) this.select = ikey;
						}
					}
				}
			}
		}
	}
}
</script>