(radio-group): 新增 name 属性, 简化 radio 配置

This commit is contained in:
就眠儀式 2022-06-08 09:26:52 +08:00
parent 176349dd92
commit e2f4b7d0d6
3 changed files with 15 additions and 6 deletions

View File

@ -25,6 +25,14 @@ const isGroup = computed(() => {
return radioGroup != undefined && radioGroup?.name === "LayRadioGroup";
});
const naiveName = computed(() => {
if(radioGroup.naiveName) {
return radioGroup.naiveName;
} else {
return props.name;
}
})
const isChecked = computed({
get() {
if (isGroup.value) {
@ -54,7 +62,7 @@ const handleClick = function () {
<template>
<span class="layui-radio">
<input type="radio" :value="label" :name="name" />
<input type="radio" :value="label" :name="naiveName" />
<div
class="layui-unselect layui-form-radio"
:class="{

View File

@ -9,6 +9,7 @@ import { provide, ref, watch } from "vue";
export interface LayRadioGroupProps {
modelValue?: string | boolean;
name?: string;
}
const props = withDefaults(defineProps<LayRadioGroupProps>(), {});
@ -17,7 +18,7 @@ const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = ref(props.modelValue);
provide("radioGroup", { name: "LayRadioGroup", modelValue: modelValue });
provide("radioGroup", { name: "LayRadioGroup", modelValue: modelValue, naiveName: props.name });
watch(
() => modelValue,

View File

@ -103,10 +103,10 @@ export default {
::: demo
<template>
<lay-radio-group v-model="selected4" @change="change4">
<lay-radio name="action" label="1">写作</lay-radio>
<lay-radio name="action" label="2">画画</lay-radio>
<lay-radio name="action" label="3">运动</lay-radio>
<lay-radio-group name="action" v-model="selected4" @change="change4">
<lay-radio label="1">写作</lay-radio>
<lay-radio label="2">画画</lay-radio>
<lay-radio label="3">运动</lay-radio>
</lay-radio-group>
</template>