修改选中颜色

141 阅读1分钟

修改选中当前颜色 外边框颜色随之改变

**<template>
	<view>
		<view class="uni-list">
			
			
			<view >
				<view class="" v-for="(item, index) in items" :key="item.value">
					<view  @click="viewChange(index)" class="box" :class="[index === current ? 'isSlect1' : '']" >
						<view :class="[index === current ? 'isSlect' : '']"  class="circle" :value="item.value"  />
					</view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	
	</view>
</template>
<script>
export default {
    data() {
        return {
            items: [{
                    value: 'USA',
                    name: '美国',
                    checked: 'true'
                },
                {
                    value: 'CHN',
                    name: '中国'
                },
                {
                    value: 'BRA',
                    name: '巴西'
                },
                {
                    value: 'JPN',
                    name: '日本'
                },
                {
                    value: 'ENG',
                    name: '英国'
                },
                {
                    value: 'FRA',
                    name: '法国'
                },
            ],
            current: -1
        }
    },
    methods: {
        viewChange: function(evt) {
						this.current = evt
        }
    }
}
</script>
<style>
	.box {
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid red;
		border-radius: 50%;
	}
	
		.circle {
			width: 40rpx;
			height: 40rpx;
			
			border-radius: 50%;
			background-color: aquamarine;
		}
	.isSlect {
		background-color: salmon;
	}
	.isSlect1 {
		border: 2rpx solid salmon;
	}
</style>**