Radio 单选框

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

选项一

选项二

选项三

<template>
    <lii-radio :options="options" ></lii-radio>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "选项一",
      value: 1,
    },
    {
      label: "选项二",
      value: 2,
      disabled: true,
    },
    {
      label: "选项三",
      value: 3,
    },
  ],
});
const { options} = state;
</script>

排列样式

设置单选框的排列方式，下面展示为竖向排列

选项一

选项二

选项三

<template>
  <lii-radio 
    :options="options"
    :checked="0"
    :inline="false">
  </lii-radio>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "选项一",
      value: 0,
    },
    {
      label: "选项二",
      value: 1,
    },
    {
      label: "选项三",
      value: 2,
    },
  ],
});
const { options } = state;
</script>

禁用状态

单选框不可用的状态，属性中设置disabled为true即可

选项一

选项二

选项三

<template>
  <lii-radio :options="options" ></lii-radio>
</template>

<script>
export default {};
</script>

<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "选项一",
      value: 0,
    },
    {
      label: "选项二",
      value: 1,
      disabled: true,
    },
    {
      label: "选项三",
      value: 2,
    },
  ],
});
const { options } = state;
</script>

选框大小

根据需要选择单选框大小。

选项一

选项二

选项三

选项一

选项二

选项三

选项一

选项二

选项三

<template>
  <lii-radio :options="options" :checked="0" size="big"></lii-radio>
  <lii-radio :options="options" :checked="0" size="mid"></lii-radio>
  <lii-radio :options="options" :checked="0" size="small"></lii-radio>
</template>

<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "选项一",
      value: 0,
    },
    {
      label: "选项二",
      value: 1,
    },
    {
      label: "选项三",
      value: 2,
    },
  ],
});
const { options } = state;
</script>

颜色调节

设置选框颜色

选项一

选项二

选项三

<template>
  <lii-radio
    :options="options"
    :checked="0"
    customColor="red"
    :fontColor="true">
  </lii-radio>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
    options: [
    {
      label: "选项一",
      value: 0,
    },
    {
      label: "选项二",
      value: 1,
    },
    {
      label: "选项三",
      value: 2,
    },
  ],
});
const { options } = state;
</script>

属性

参数	说明	类型	可选值	默认值
options	渲染单选框数据	Array	——	——
inline	单选框按行排列	Boolean	true/false	true
size	单选框大小	String	big/nomal/small	nomal
filedLabel	自定义单选框标签名	String	——	label
filedValue	自定义单选框值	String	——	value
customColor	自定义单选框颜色	String	颜色值(rgb/rgba/hex/hsl)	#409eff
fontColor	是否显示标签名颜色	Boolean	true/false	false
checked	选中第几个单选框	Number	-1~options.length	-1(不选中)

事件

事件名称	说明	回调参数	示例
change	选项发生变化时触发	(event: Value)	change=(value)=>{console.log(value)}