86 lines
1.3 KiB
Vue
86 lines
1.3 KiB
Vue
<template>
|
|
<view class="radio_choice">
|
|
<view class="item" v-for="item in info" :key="item.value"
|
|
:class="item.value==value?'active':''" @click="select(item.value)">
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"radio-choice",
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:()=>[]
|
|
},
|
|
value:{
|
|
type:[String,Number],
|
|
default:null
|
|
},
|
|
keyName:{
|
|
type:String,
|
|
default:null
|
|
},
|
|
valueName:{
|
|
type:String,
|
|
default:null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tempVal:""
|
|
};
|
|
},
|
|
methods:{
|
|
select(val){
|
|
if(this.tempVal!=val){
|
|
this.tempVal=val
|
|
}else{
|
|
this.tempVal=null
|
|
}
|
|
this.$emit("input",this.tempVal)
|
|
}
|
|
},
|
|
computed:{
|
|
info(){
|
|
let arr = this.list.map(item=>{
|
|
if(this.keyName&&this.valueName){
|
|
return {
|
|
label:item[keyName],
|
|
value:item[valueName]
|
|
}
|
|
}else{
|
|
return{
|
|
...item
|
|
}
|
|
}
|
|
})
|
|
return arr
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.radio_choice{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
.item{
|
|
width: 30%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-radius: 30rpx;
|
|
background-color: #eee;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
&.active{
|
|
color: #69BB73;
|
|
background-color:rgba(105,187,115,0.3);
|
|
}
|
|
}
|
|
}
|
|
</style> |