ERP 组件库

Appearance

单选框 Radio ​

在一组相关且互斥数据中，用户仅能选择一个选项。

基本用法 ​

单选框的基本用法。

代码事例
vue
<template>
  <fk-space size="large">
    <fk-radio value="radio">Radio</fk-radio>
    <fk-radio value="disabled radio" :default-checked="true" disabled>Disabled Radio</fk-radio>
  </fk-space>
</template>

受控 ​

通过 v-model (model-value) 属性控制是否选中

代码事例
vue
<template>
  <fk-space size="large">
    <fk-radio v-model="checked1">v-model</fk-radio>
    <fk-radio :model-value="true">binding "true"</fk-radio>
    <fk-radio :model-value="checked2">binding value2</fk-radio>
    <fk-radio :default-checked="true">uncontrolled state</fk-radio>
  </fk-space>
  <div :style="{ marginTop: '20px' }">
    <fk-space size="large">
      <fk-button type="primary" @click="handleSetCheck">
        {{ checked2 ? 'uncheck' : 'check' }} value2
      </fk-button>
      <fk-button @click="handleReset"> reset all </fk-button>
    </fk-space>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked1 = ref(false);
    const checked2 = ref(false);

    const handleSetCheck = () => {
      checked2.value = !checked2.value;
    };

    const handleReset = () => {
      checked1.value = false;
      checked2.value = false;
    };

    return {
      checked1,
      checked2,
      handleSetCheck,
      handleReset,
    };
  },
};
</script>

单选框组 ​

通过 <fk-radio-group> 组件展示单选框组。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group>
      <fk-radio value="A">A</fk-radio>
      <fk-radio value="B">B</fk-radio>
      <fk-radio value="C">C</fk-radio>
      <fk-radio value="D">D</fk-radio>
    </fk-radio-group>
    <fk-radio-group>
      <fk-radio value="A">A</fk-radio>
      <fk-radio value="B">B</fk-radio>
      <fk-radio value="C">C</fk-radio>
      <fk-radio value="D" disabled>D</fk-radio>
    </fk-radio-group>
  </fk-space>
</template>

非严格模式 ​

通过 strict 属性控制Radio是否严格模式。

代码事例
vue
<template>
	<fk-space direction="vertical" size="large">
		<fk-radio-group :strict="false">
			<fk-radio value="A">A</fk-radio>
			<fk-radio value="B">B</fk-radio>
			<fk-radio value="C">C</fk-radio>
			<fk-radio value="D">D</fk-radio>
		</fk-radio-group>

		<fk-radio value="A" :strict="false">A</fk-radio>
	</fk-space>
</template>

单选框组选项 ​

fk-radio-group 通过 options 属性设置子元素

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="value1" :options="plainOptions" />
    <fk-radio-group v-model="value2" :options="options" />
    <fk-radio-group v-model="value2" :options="options">
      <template #label="{ data }">
        <fk-tag>{{ data.label }}</fk-tag>
      </template>
    </fk-radio-group>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value1 = ref('plain 1');
    const plainOptions = ['plain 1', 'plain 2', 'plain 3'];

    const value2 = ref('1');
    const options = [
      { label: 'option 1', value: '1' },
      { label: 'option 2', value: '2' },
      { label: 'option 3', value: '3', disabled: true },
    ];

    return {
      plainOptions,
      options,
      value1,
      value2,
    };
  },
};
</script>

单选框组方向 ​

通过设置 direction="vertical" 可以展示竖直的单选框组。

代码事例
vue
<template>
  <fk-radio-group direction="vertical">
    <fk-radio value="A">A</fk-radio>
    <fk-radio value="B">B</fk-radio>
    <fk-radio value="C">C</fk-radio>
    <fk-radio value="D">D</fk-radio>
  </fk-radio-group>
</template>

按钮类型的单选框组 ​

通过指定 type="button" ，可以显示按钮类型的单选框组。

代码事例
vue
<template>
  <fk-radio-group type="button">
    <fk-radio value="Beijing">Beijing</fk-radio>
    <fk-radio value="Shanghai">Shanghai</fk-radio>
    <fk-radio value="Guangzhou">Guangzhou</fk-radio>
    <fk-radio value="Shenzhen">Shenzhen</fk-radio>
  </fk-radio-group>
</template>

按钮类型单选框组的尺寸 ​

按钮类型的单选框组分为 mini、small、medium、large 四种尺寸。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group type="button" size="mini">
      <fk-radio value="Beijing">Beijing</fk-radio>
      <fk-radio value="Shanghai">Shanghai</fk-radio>
      <fk-radio value="Guangzhou">Guangzhou</fk-radio>
      <fk-radio value="Shenzhen">Shenzhen</fk-radio>
    </fk-radio-group>
    <fk-radio-group type="button" size="small">
      <fk-radio value="Beijing">Beijing</fk-radio>
      <fk-radio value="Shanghai">Shanghai</fk-radio>
      <fk-radio value="Guangzhou">Guangzhou</fk-radio>
      <fk-radio value="Shenzhen">Shenzhen</fk-radio>
    </fk-radio-group>
    <fk-radio-group type="button">
      <fk-radio value="Beijing">Beijing</fk-radio>
      <fk-radio value="Shanghai">Shanghai</fk-radio>
      <fk-radio value="Guangzhou">Guangzhou</fk-radio>
      <fk-radio value="Shenzhen">Shenzhen</fk-radio>
    </fk-radio-group>
    <fk-radio-group type="button" size="large">
      <fk-radio value="Beijing">Beijing</fk-radio>
      <fk-radio value="Shanghai">Shanghai</fk-radio>
      <fk-radio value="Guangzhou">Guangzhou</fk-radio>
      <fk-radio value="Shenzhen">Shenzhen</fk-radio>
    </fk-radio-group>
  </fk-space>
</template>

布局 ​

使用 <fk-radio-group> 传入 <fk-radio>，配合 <fk-grid> 组件实现灵活的布局。

代码事例
vue
<template>
  <fk-radio-group v-model="checkedValue">
    <fk-grid :cols="3" :col-gap="24" :row-gap="16">
      <fk-grid-item>
        <fk-radio value="1">Option 1</fk-radio>
      </fk-grid-item>
      <fk-grid-item>
        <fk-radio value="2" disabled>Option 2</fk-radio>
      </fk-grid-item>
      <fk-grid-item>
        <fk-radio value="3">Option 3</fk-radio>
      </fk-grid-item>
      <fk-grid-item>
        <fk-radio value="4">Option 4</fk-radio>
      </fk-grid-item>
      <fk-grid-item>
        <fk-radio value="5">Option 5</fk-radio>
      </fk-grid-item>
    </fk-grid>
  </fk-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checkedValue = ref('1');

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

自定义单选框 ​

使用 #radio 插槽自定义复选框的展示

代码事例
vue
<template>
  <fk-radio-group default-value="1">
    <fk-radio value="1">
      <template #radio="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag radio 1</fk-tag>
      </template>
    </fk-radio>
    <fk-radio value="2">
      <template #radio="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag radio 2</fk-tag>
      </template>
    </fk-radio>
    <fk-radio value="3">
      <template #radio="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag radio 3</fk-tag>
      </template>
    </fk-radio>
  </fk-radio-group>

  <div :style="{ marginTop: '20px' }">
    <fk-radio-group>
      <template v-for="item in 2" :key="item">
        <fk-radio :value="item">
          <template #radio="{ checked }">
            <fk-space
              align="start"
              class="custom-radio-card"
              :class="{ 'custom-radio-card-checked': checked }"
            >
              <div className="custom-radio-card-mask">
                <div className="custom-radio-card-mask-dot" />
              </div>
              <div>
                <div className="custom-radio-card-title">
                  radio Card {{ item }}
                </div>
                <fk-typography-text type="secondary">
                  this is a text
                </fk-typography-text>
              </div>
            </fk-space>
          </template>
        </fk-radio>
      </template>
    </fk-radio-group>
  </div>
</template>

<style scoped>
.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked  .custom-radio-card-mask{
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>

API ​

<radio> Props ​

参数名描述类型默认值
model-value (v-model)绑定值string | number | boolean-
default-checked默认是否选中（非受控状态）booleanfalse
value选项的 valuestring | number | booleantrue
type单选的类型'radio' | 'button''radio'
disabled是否禁用booleanfalse

<radio> Events ​

事件名描述参数
change值改变时触发value: string | number | boolean
ev: Event

<radio> Slots ​

插槽名描述参数版本
radio自定义单选框checked: boolean
disabled: boolean		1.0.0

<radio-group> Props ​

参数名描述类型默认值版本
model-value (v-model)绑定值string | number | boolean-
default-value默认值（非受控状态）string | number | boolean''
type单选框组的类型'radio' | 'button''radio'
size单选框组的尺寸'mini' | 'small' | 'medium' | 'large'-
options选项Array<string | number | RadioOption>-1.0.0
direction单选框组的方向'horizontal' | 'vertical''horizontal'
disabled是否禁用booleanfalse

<radio-group> Events ​

事件名描述参数
change值改变时触发value: string | number | boolean

<radio-group> Slots ​

插槽名描述参数版本
radio自定义单选框checked: boolean
disabled: boolean		1.0.0
labelradio 文案内容data: RadioOption1.0.0

RadioOption ​

参数名描述类型默认值
label文案RenderContent-
value选项的 valuestring | number-
disabled是否禁用booleanfalse

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team