
3 changed files with 139 additions and 136 deletions
@ -1,88 +1,88 @@ |
|||
<template> |
|||
<el-form-item |
|||
:class="[{'column':column},'form-item']" |
|||
:label="label" :prop="prop" :rules="rules"> |
|||
<el-radio-group |
|||
v-model="selectedValue" |
|||
v-bind="$attrs" |
|||
@change="handleChange" |
|||
<template> |
|||
<el-form-item |
|||
:class="[{'column':column},'form-item']" |
|||
:label="label" :prop="prop" :rules="rules" :required="required"> |
|||
<el-radio-group |
|||
v-model="selectedValue" |
|||
v-bind="$attrs" |
|||
@change="handleChange" |
|||
> |
|||
<el-radio |
|||
v-for="option in options" |
|||
:key="option.value" |
|||
:label="option.value" |
|||
:disabled="option.disabled" |
|||
> |
|||
<el-radio |
|||
v-for="option in options" |
|||
:key="option.value" |
|||
:label="option.value" |
|||
:disabled="option.disabled" |
|||
> |
|||
<!-- 默认展示和选中显示 不同文案 --> |
|||
{{ selectedValue === option.value ? option.selectedLabel : option.label }} |
|||
<!-- 自定义 选中图标 --> |
|||
<!-- <template #label> |
|||
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span> |
|||
</template> --> |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MyRadioGroup', |
|||
props: { |
|||
// 是否是纵向排列 |
|||
column:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
// 选项列表,格式为 [{ label: '显示文本', value: '值', disabled: false }] |
|||
options: { |
|||
type: Array, |
|||
required: true, |
|||
}, |
|||
// 当前选中的值,使用 v-model 绑定 |
|||
value: { |
|||
type: [String, Number, Boolean], |
|||
default: '', |
|||
}, |
|||
// 表单项的 label |
|||
label: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 表单项的 prop(用于表单校验) |
|||
prop: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 校验规则 |
|||
rules: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
<!-- 默认展示和选中显示 不同文案 --> |
|||
{{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MyRadioGroup', |
|||
props: { |
|||
// 是否是纵向排列 |
|||
column:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: this.value, // 内部维护的选中值 |
|||
}; |
|||
required:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
watch: { |
|||
// 监听外部传入的 value 变化,更新内部 selectedValue |
|||
value(newVal) { |
|||
this.selectedValue = newVal; |
|||
}, |
|||
// 选项列表,格式为 [{ label: '显示文本', value: '值', disabled: false }] |
|||
options: { |
|||
type: Array, |
|||
required: true, |
|||
}, |
|||
methods: { |
|||
// 选中值变化时触发 |
|||
handleChange(value) { |
|||
this.$emit('input', value); // 更新 v-model |
|||
this.$emit('change', value); // 触发 change 事件 |
|||
}, |
|||
// 当前选中的值,使用 v-model 绑定 |
|||
value: { |
|||
type: [String, Number, Boolean], |
|||
default: '', |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 自定义样式 */ |
|||
.el-radio-group { |
|||
margin: 10px 0; |
|||
} |
|||
</style> |
|||
// 表单项的 label |
|||
label: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 表单项的 prop(用于表单校验) |
|||
prop: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 校验规则 |
|||
rules: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: this.value, // 内部维护的选中值 |
|||
}; |
|||
}, |
|||
watch: { |
|||
// 监听外部传入的 value 变化,更新内部 selectedValue |
|||
value(newVal) { |
|||
this.selectedValue = newVal; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 选中值变化时触发 |
|||
handleChange(value) { |
|||
this.$emit('input', value); // 更新 v-model |
|||
this.$emit('change', value); // 触发 change 事件 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 自定义样式 */ |
|||
.el-radio-group { |
|||
margin: 10px 0; |
|||
} |
|||
</style> |
Loading…
Reference in new issue