最近在项目中遇到一个问题,一个选择
需要一个固定的类名提供公共样式,一个类名来判定显示 那个颜色的,另一个类名判定是否是选中状态,思考了很久,网上找了很久,终于让我写了出来,一起看代码吧!!!!
<template>
<div style="margin-top: 30px;" class="newAddPop controlFuzzy">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="车身颜色">
<div class="placeColor">
<p v-for="(name,ind) in carColor" :key="ind"
:class="selectColor(ind)"
@click="carIndex = ind"></p>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
form: {
name: '',
region: 0,
},
carIndex: 0,
carColor: ['icon_palceWhite','icon_palceBlack','icon_palceYellow','icon_palceBlue']
}
},
methods: {
selectColor(ind){
let obj = {iconPlace: true} // 公共的一个类名
let color = this.carColor[ind] // 需要循环数组中的一个类名
obj[color] = true
if(this.carIndex==ind){ // 需要进行点击的时候出现的一个类名
obj['el-icon-success'] = true
}
return obj
}
}
}
</script>
<style lang="less" scoped>
</style>