Radio单选

● 基本使用

radio 组件的基本使用，需要一个主要的options参数。

北京

上海

广州

深圳

展示代码

vue

<template>
      <k-radio :options="options"></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              label:'北京',
              value:1
          },
          {
              label:'上海',
              value:2
          },
          {   
              label:'广州',
              value:3
          }
      ]
  })
  const {options} =state
</script>

● 禁用选项

可以针对 options 下某个选项来添加disabled 属性实现禁用选项。

大一

大二

大三

大四

展示代码

vue

<template>
      <k-radio :options="options"></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              label:'北京',
              value:1,
              // disabled:true
          },
          {
              label:'上海',
              value:2,
              disabled:true
          },
          {   
              label:'广州',
              value:3
          }
      ]
  })
  const {options} =state
</script>

● 垂直排列

可以通过添加column属性为实现垂直排列。

北京

上海

广州

深圳

展示代码

vue

<template>
      <k-radio :options="options" column></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              label:'北京',
              value:1,
          },
          {
              label:'上海',
              value:2
          },
          {   
              label:'广州',
              value:3
          }
  })
  const {options} =state
</script>

● 自定义颜色

可以通过设置customColor属性的值自定义你喜欢的颜色。

北京

上海

广州

深圳

北京

上海

广州

深圳

展示代码

vue

<template>
      <k-radio :options="options" customColor="#FFE4E1"></k-radio>
      <k-radio :options="options" customColor="#C1FFC1"></k-radio>
      <k-radio :options="options" customColor="#87CEFA"></k-radio>
      <k-radio :options="options" customColor="#EEC591"></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              label:'北京',
              value:1
          },
          {
              label:'上海',
              value:2
          },
          {   
              label:'广州',
              value:3
          }
      ]
  })
  const {options} =state
</script>

● 自定义数据格式

默认options接收label和value作为显示和值绑定，你可以使用labelFiled和valueFiled来重新确定字段的绑定，更方便的匹配不同格式的数据。

北京

上海

广州

深圳

展示代码

vue

<template>
      <k-radio :options="options" filedLabel="name" filedValue="id"></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              name:'北京',
              id:1
          },
          {
              name:'上海',
              id:2
          },
          {   
              name:'广州',
              id:3
          }
      ]
  })
  const {options} =state
</script>

● 获取点击的数据

可以通过绑定change事件,获取点击的数据

北京

上海

广州

深圳

展示代码

vue

<template>
      <k-radio :options="options" @change="change"></k-radio>
</template>
<script lang="ts" setup>
  import {reactive} from 'vue'
  const state =reactive({
      options:[
          {
              label:'北京',
              value:1
          },
          {
              label:'上海',
              value:2
          },
          {   
              label:'广州',
              value:3
          }
      ]
  })
  const {options} =state;
  const change=(e:any)=>{
      console.log(e)
  }
</script>

● Attributes 参数

参数	类型	说明	可选值	默认值
v-model	String \|\| Number	单选绑定值	——	——
size	String	尺寸大小	default / small / mini	default
options	Array	单选数据配置，具体见下方 options API	——	[]
inline	Boolean	是否为行内元素	true / false	true
labelFiled	String	自定义替换lable的字段名	——	label
valueFiled	String	自定义替换value的字段名	——	value
customColor	String	自定义选中颜色色值	——	——
customClass	String	自定义组件类名	——	——

Radio单选 #

● 基本使用 #

● 禁用选项 #

● 垂直排列 #

● 自定义颜色 #

● 自定义数据格式 #

● 获取点击的数据 #

● Attributes 参数 #

Radio单选

● 基本使用

● 禁用选项

● 垂直排列

● 自定义颜色

● 自定义数据格式

● 获取点击的数据

● Attributes 参数