Radio、Radio-Group、Radio-Button 已知问题

[qiqingfu]

下面案例 Demo 都是在 npm run dev:play 环境下测试的 Radio、Radio-Group、Radio-Button 组件。

Radio-Group 报错

复现代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px" size="small">
    <el-form-item label="活动区域">
      <el-select v-model="formData.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="特殊资源">
      <el-radio-group v-model="formData.resource">
        <el-radio border label="线上品牌商赞助"></el-radio>
        <el-radio border label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<script>
  import { reactive } from "vue"
  export default {
    setup() {
      const formData = reactive({
        region: '区域一',
        resource: '线上品牌商赞助',
      })

      return {
        formData,
      }
    }
  };
</script>

结果：

Uncaught TypeError: Cannot read property 'elFormItemSize' of undefined
    at eval (RadioGroup.vue?42b0:121)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
    at unref (reactivity.esm-bundler.js?a1e9:735)
    at Object.get (reactivity.esm-bundler.js?a1e9:738)
    at Object.get [as radioGroupSize] (runtime-core.esm-bundler.js?5c40:6081)
    at eval (Radio.vue?058f:182)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
    at unref (reactivity.esm-bundler.js?a1e9:735)

期望运行时不报错。

在 el-form 使用 size 属性，el-radio 无效问题

el-radio 复现代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px" size="mini">
    <el-form-item label="特殊资源">
      <el-radio border label="线上品牌商赞助" v-model="radio1"></el-radio>
      <el-radio border label="线下场地免费" v-model="radio1"></el-radio>
    </el-form-item>
  </el-form>
</template>
<script>
  import { ref } from "vue"
  export default {
    setup() {
      const radio1 = ref('线上品牌商赞助')

      return {
        radio1,
      }
    }
  };
</script>

结果：

当 el-form 组件设置 size 为 medium 、small 或 mini 时，el-radio 组件的尺寸无效（el-radio 应用了 border ）

期望：

el-radio 组件在自身不设置 size 属性时，在 el-form 组件内使用，根据 el-form 的 size 而调整

在 el-form 使用 disabled 属性，el-radio和el-radio-button 无效问题

el-radio 复现代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px" size="mini" disabled>
    <el-form-item label="特殊资源">
      <el-radio border label="线上品牌商赞助" v-model="radio1"></el-radio>
      <el-radio border label="线下场地免费" v-model="radio1"></el-radio>
    </el-form-item>
  </el-form>
</template>
<script>
  import { ref } from "vue"
  export default {
    setup() {
      const radio1 = ref('线上品牌商赞助')

      return {
        radio1,
      }
    }
  };
</script>

El-radio-button 复现代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px" size="mini" disabled>
    <el-form-item label="特殊资源">
      <el-radio-group v-model="radio1">
        <el-radio-button label="线上品牌商赞助"></el-radio-button>
        <el-radio-button label="线下场地免费"></el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<script>
  import { ref } from "vue"
  export default {
    setup() {
      const radio1 = ref('线上品牌商赞助')

      return {
        radio1,
      }
    }
  };
</script>

结果：

当 el-form 组件设置了 disabled 时，el-radio 不是禁用状态

期望：

当 el-form 组件设置了 disabled 时，并且 el-radio 自身没有设置 disabled=false 时，el-radio 组件应为禁用状态

[cuixiaorui]

good job