<!-- 用栅格布局实现的单选框 -->
<template>
<!--v-model默认绑定:value="value" @change="value = $event.target.value"-->
<el-radio-group :value="value" @input="handleChange" >
<el-row>
<el-col
v-for="option in options"
:key="option.label"
:span="span"
>
<el-radio :label="option.value" :border="border" :size="radioSize">
{{ option.text }}
</el-radio>
</el-col>
</el-row>
</el-radio-group>
</template>
<script>
export default {
name: "GridRadio",
props: {
/*父子组件传值 类型可以是string bool 数字型登登*/
value: { type: String | Number | Boolean, required: true, default: null },
/*同上*/
options: { type: Array, required: true },
/*同上*/
border: { type: Boolean, default: false },
/*同上*/
span: { type: Number, default: 4 },
/*控制大小*/
radioSize: { type: String, default: "medium" }
},
/*只是把父亲的绑定的value数值变成value 父亲的v-model的方法变为change的
* 当自己的数值变化的时候 触发父亲的事件 change*/
model: {
/*改变默认得事件 :value="value" @change="value = $event.target.value"*/
event: "change",
prop: "value"
},
data() {
return {};
},
methods: {
handleChange(val) {
/*绑定change事件*/
/*数值绑定change得事件可以进行传值*/
this.$emit("change", val);
console.log(1)
}
}
};
</script>
<style scoped></style>
/*只是把父亲的绑定的value数值变成value 父亲的v-model的方法变为change的
* 当自己的数值变化的时候 触发父亲的事件 change*/