子组件
html
<div class="commentRadio">
<div v-for="(con,i) in Obj.tmList" :key="i+'r'" class="inputClass">
<input
:id="con.id"
type="checkbox"
:value="con.id"
v-model="checklist"
:disabled="false"
>
<label :for="con.id"></label>
<span>
<label :for="con.id" style="margin-left:30px">
{{con.item}}.{{con.title}}
<a style="color:red;font-size:4vw">({{con.score}}分)</a>
</label>
</span>
</div>
</div>
js
export default {
props: ['Obj'],
data() {
return {
checklist: [],
subjectId: ''
}
},
watch: {
Obj: {
handler(val) {
this.questionId = val.id
if (!val.selectedId) {
this.checklist = []
} else {
if (typeof val.selectedId === 'string') {
this.checklist = this.strAndArr(val.selectedId)
}
if (typeof val.selectedId === 'object') {
this.checklist = val.selectedId
}
}
},
deep: true,
immediate: true
},
checklist: {
handler(val) {
this.Obj.selectedId = val
this.$emit('getCheckboxVal', {
tmId: this.questionId,
checkValues: val
})
},
deep: true,
immediate: true
}
},
created() {
this.stateValue = sessionStorage.getItem('stateValue')
},
methods: {
// 字符串转数组
strAndArr(str) {
return str.split(',')
}
}
}
css
.commentRadio input {
width: 4.5vw;
height: 4.5vw;
display: none;
}
.inputClass {
position: relative;
line-height: 10vw;
margin-left: 15px;
}
.inputClass input[type='checkbox'] {
width: 20px;
height: 20px;
opacity: 0;
}
.inputClass > label {
position: absolute;
left: -2px;
top: 9px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
.inputClass input:checked + label {
background-color: #f24d4b;
border: 1px solid #f24d4b;
}
.inputClass input:checked + label::after {
position: absolute;
content: '';
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}