ZRadio

单选框。版本要求 >= 1.1.21

基础用法

<template>
  <div>
    <z-radio v-model:checked="state">Radio</z-radio>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const state = ref(false);
</script>

<style lang="less" scoped>

</style>

禁用

使用 disabled 启用禁用。

<template>
  <div>
    <z-radio v-model:checked="state" :disabled="disabled">Radio</z-radio>

    <div class="mt12">
      <z-button size="small" type="primary" @click="disabled = !disabled">{{state ? 'Disabled' :  'Enable'}}</z-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const state = ref(false);
const disabled = ref(false);
</script>

<style lang="less" scoped>
.mt12 {
  margin-top: 12px;
}
</style>

自定义色彩和尺寸

使用 color、 size 设置主题色和大小

紫色24px

<template>
  <div>
    <z-radio v-model:checked="state" value="1">默认</z-radio>
    <z-radio color="#9370ac" v-model:checked="state2">紫色</z-radio>
    <z-radio color="#90a759" :size="24" v-model:checked="state3">24px</z-radio>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const state = ref("1");
const state2 = ref(true);
const state3 = ref(true);
</script>

<style lang="less" scoped>

</style>

分组

方便从数组生成 radio

Apple

AppleOrangePearBanana

AppleOrangePearBanana

<template>
  <div>
    <z-radio-group v-model:value="state" :options="options"></z-radio-group>
    <br/>
    <z-radio-group v-model:value="stateB" :options="optionsB" color="#26c6da" :size="20"></z-radio-group>
    <br/>
    <z-radio-group v-model:value="stateC" :options="optionsB" color="#b75d2d" :size="20" disabled></z-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { RadioItem } from "@d7ee/z-base-ui/dist/types/components/ZRadioGroup";

const state = ref("Apple");
const options = ref<RadioItem[]>([
  {label: "Apple", value: "Apple", color: "#99a559"},
  {label: "Orange", value: "Orange", disabled: true},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana"},
]);

const stateB = ref("Pear");
const optionsB = ref<RadioItem[]>([
  {label: "Apple", value: "Apple", color: "#99a559"},
  {label: "Orange", value: "Orange", disabled: true},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana"},
]);

const stateC = ref("Pear");
</script>

<style lang="less" scoped>

</style>

布局

CheckBox.Group内嵌Checkbox，实现更灵活的布局

AppleOrangePearBanana

<template>
  <div>
    <z-radio-group v-model:value="state" color="#b75d2d" :size="20">
      <z-radio v-for="item in options" :key="item.value" :value="item.value">
        {{item.label}}
      </z-radio>
    </z-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {RadioItem} from "@d7ee/z-base-ui/dist/types/components/ZRadioGroup";

const state = ref("Pear");
const options = ref<RadioItem[]>([
  {label: "Apple", value: "Apple"},
  {label: "Orange", value: "Orange"},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana"},
]);
</script>

<style lang="less" scoped>

</style>

API 属性

属性名	说明	类型	默认值
checked	选中状态，使用v-model:value绑定	boolean | sting | number	false
disabled	不可用，禁用	boolean	false
size	尺寸	number	17px
color	选中后的主题色	string	—
value	设置选中时使的值	boolean | string | number	true

Checkbox Group

属性名	说明	类型	默认值
value	指定选中的项，使用v-model:value绑定	(boolean |sting |number | undefind)	—
options	指定可选项	string[] | group-options	[]
disabled	整组禁用	boolean	false
size	尺寸	number	18px
color	选中后的主题色	string	—
gap	间距	string	12px

Group Options

type RadioItem = Array<{
  // 选中值
  value: string | number | boolean,
  // 标题
  label: string,
  // 选中时的颜色
  color?: string,
  // 禁用
  disabled?: boolean,
  // 尺寸
  size?: number
}>;

event 事件

事件名称	说明	回调参数
change	状态发生改变时时回调	(event: any) => void