Radio

封装单选框组件

使用

基础用法

传入 data 数据将自动生成选项

<template>
  <pro-radio v-model="radio" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      data,
    }
  },
})
</script>

控制不可选项目

将传入 data 数据中的某项设置为 disabled: true 即可

<template>
  <pro-radio v-model="radio" :data="list" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const list = ref([
      { value: 'Go', label: 'go', disabled: true },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      list,
    }
  },
})
</script>

配置绑定数据键值

通过 config 配置数据键值。value- v-model 绑定的键值、label-显示键值、disabled-控制不可选的键值、name-原生 name 的键值

<template>
  <pro-radio v-model="radio" :data="data" :config="config" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      config,
      data,
    }
  },
})
</script>

按钮样式

使用 pro-radio-button 显示按钮样式的多选框组

<template>
  <pro-radio-button v-model="radiobutton" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radiobutton = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radiobutton,
      data,
    }
  },
})
</script>

Radio 配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
size尺寸stringlarge / default /small-
disabled是否禁用boolean-false
text-color按钮形式激活时的文本颜色string-#ffffff
fill按钮形式激活时的填充色和边框色string-#409EFF
validate-event输入时是否触发表单的校验boolean-true

Radio 事件

名称说明类型
change绑定值变化时触发的事件(value: string | number | boolean) => void

RadioButton

封装单选框按钮组件

RadioButton 配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
size尺寸stringlarge / default /small-
disabled是否禁用boolean-false
text-color按钮形式激活时的文本颜色string-#ffffff
fill按钮形式激活时的填充色和边框色string-#409EFF
validate-event输入时是否触发表单的校验boolean-true

RadioButton 事件

名称说明类型
change绑定值变化时触发的事件(value: string | number | boolean) => void