121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
|
<div class="AiRadio" :class="[isLine ? 'AiRadio-line' : '']">
|
|
<div
|
|
class="AiRadio-item"
|
|
v-for="(item, index) in options"
|
|
@click="onChange(index)"
|
|
:class="[currIndex === index ? 'active' : '']"
|
|
:key="index">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiRadio',
|
|
|
|
model: {
|
|
event: 'input',
|
|
prop: 'value'
|
|
},
|
|
|
|
props: {
|
|
value: String,
|
|
placeholder: {
|
|
default: '请选择'
|
|
},
|
|
list: {
|
|
default: () => []
|
|
},
|
|
isLine: Boolean,
|
|
dict: String,
|
|
disabled: Boolean
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
currIndex: -1,
|
|
dictKey: ''
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
options () {
|
|
return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
|
|
value: e.dictValue,
|
|
label: e.dictName
|
|
})) : this.list
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$dict.load(this.dict).then(() => {
|
|
this.dictKey = this.dict
|
|
|
|
if (this.value) {
|
|
console.log(this.value)
|
|
this.$dict.getDict(this.dict).forEach((e, i) => {
|
|
console.log(e)
|
|
if (e.dictValue === this.value) {
|
|
this.currIndex = i
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
onChange (index) {
|
|
this.currIndex = index
|
|
const choosed = this.options[index]
|
|
this.$emit('name', choosed.label)
|
|
this.$emit('input', choosed.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiRadio {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.AiRadio-item {
|
|
width: 212px;
|
|
line-height: 1.3;
|
|
padding: 20px 32px;
|
|
margin-bottom: 16px;
|
|
margin-right: 16px;
|
|
padding: 20px 32px;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border-radius: 16px;
|
|
color: #333333;
|
|
font-size: 28px;
|
|
border: 1px solid #CCCCCC;
|
|
box-sizing: border-box;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
background: #4181FF;
|
|
color: #fff;
|
|
border-color: #4181FF;
|
|
}
|
|
}
|
|
|
|
&.AiRadio-line {
|
|
width: 100%;
|
|
|
|
.AiRadio-item {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|