Sard Uniapp

Appearance

在新窗口打开⤴

Radio单选按钮

介绍 ​

在一组可选项中进行单一选择。

引入 ​

js
import Radio from 'sard-uniapp/components/radio/radio.vue'
import RadioGroup from 'sard-uniapp/components/radio-group/radio-group.vue'

代码演示 ​

基础使用 ​

使用 v-model 绑定当前选中值。

vue
<template>
  <sar-radio-group v-model="value" @change="onChange">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-radio-group v-model="value" @change="onChange">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

排列方向 ​

将 direction 属性设置为 horizontal 后，单选按钮组会变成水平排列。

vue
<template>
  <sar-radio-group v-model="value" direction="horizontal">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')
</script>
vue
<template>
  <sar-radio-group v-model="value" direction="horizontal">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
</script>

只读和禁用 ​

只读或禁用后不可点击。

vue
<template>
  <doc-title>只读</doc-title>
  <sar-radio-group model-value="option1" readonly>
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>

  <doc-title>禁用</doc-title>
  <sar-radio-group model-value="option1" disabled>
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

图标大小 ​

使用 size 属性设置图标大小。

vue
<template>
  <sar-radio-group v-model="value" size="48rpx">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')
</script>
vue
<template>
  <sar-radio-group v-model="value" size="48rpx">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
</script>

图标颜色 ​

使用 checked-color 属性设置选中时的图标颜色。

vue
<template>
  <sar-radio-group v-model="value" checked-color="var(--sar-red)">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')
</script>
vue
<template>
  <sar-radio-group v-model="value" checked-color="var(--sar-red)">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
</script>

图标类型 ​

设置 type 属性为 record 可以使图标变为圆点类型。

vue
<template>
  <sar-radio-group v-model="value" type="record">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')
</script>
vue
<template>
  <sar-radio-group v-model="value" type="record">
    <sar-radio value="option1">选项1</sar-radio>
    <sar-radio value="option2">选项2</sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
</script>

自定义图标 ​

如果内置的图标不满足需求，可以使用 icon 插槽设置为任意的图标。 插槽接收checked属性表示当前的选中状态。

vue
<template>
  <sar-radio-group v-model="value">
    <sar-radio v-for="item in list" :value="item.value" :key="item.value">
      <template #icon="{ checked }">
        <sar-icon
          family="demo-icons"
          size="40rpx"
          :name="checked ? 'heart-fill' : 'heart'"
        />
      </template>
      {{ item.label }}
    </sar-radio>
  </sar-radio-group>
</template>

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

const value = ref('option1')
const list = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
]
</script>
vue
<template>
  <sar-radio-group v-model="value">
    <sar-radio v-for="item in list" :value="item.value" :key="item.value">
      <template #icon="{ checked }">
        <sar-icon
          family="demo-icons"
          size="40rpx"
          :name="checked ? 'heart-fill' : 'heart'"
        />
      </template>
      {{ item.label }}
    </sar-radio>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option1");
const list = [
  { label: "\u9009\u98791", value: "option1" },
  { label: "\u9009\u98792", value: "option2" }
];
</script>

自动渲染单选按钮 ​

使用 options 属性设置可选项。

vue
<template>
  <sar-radio-group v-model="value" :options="options"></sar-radio-group>
</template>

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

const value = ref('option2')

const options = Array(3)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })
</script>
vue
<template>
  <sar-radio-group v-model="value" :options="options"></sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option2");
const options = Array(3).fill(0).map((_, i) => {
  return {
    value: `option${i + 1}`,
    label: `\u9009\u9879${i + 1}`
  };
});
</script>

自定义 UI ​

如果只想使用单选的逻辑，并想自定义 UI，可以使用单选按钮组的 custom 插槽。

这个插槽接收 toggle方法和 value 属性作为参数。toggle 用于选中指定的选项，value 用于判断选中状态。

vue
<template>
  <sar-radio-group v-model="value">
    <template #custom="{ toggle, value }">
      <view>
        <sar-tag
          v-for="option in options"
          :key="option.value"
          theme="primary"
          root-style="margin-right: 20rpx"
          :plain="option.value !== value"
          @click="toggle(option.value)"
        >
          {{ option.label }}
        </sar-tag>
      </view>
    </template>
  </sar-radio-group>
</template>

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

const value = ref('option2')

const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
]
</script>
vue
<template>
  <sar-radio-group v-model="value">
    <template #custom="{ toggle, value }">
      <view>
        <sar-tag
          v-for="option in options"
          :key="option.value"
          theme="primary"
          root-style="margin-right: 20rpx"
          :plain="option.value !== value"
          @click="toggle(option.value)"
        >
          {{ option.label }}
        </sar-tag>
      </view>
    </template>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option2");
const options = [
  { value: "option1", label: "\u9009\u98791" },
  { value: "option2", label: "\u9009\u98792" },
  { value: "option3", label: "\u9009\u98793" }
];
</script>

结合 list 组件使用：

vue
<template>
  <sar-radio-group v-model="value" root-style="margin-top: 40rpx">
    <template #custom="{ toggle, value }">
      <sar-list card>
        <sar-list-item
          v-for="option in options"
          :key="option.value"
          :title="option.label"
          hover
          @click="toggle(option.value)"
        >
          <template #value>
            <sar-icon
              v-if="option.value === value"
              color="var(--sar-red)"
              size="32rpx"
              name="success"
            />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

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

const value = ref('option2')

const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
]
</script>
vue
<template>
  <sar-radio-group v-model="value" root-style="margin-top: 40rpx">
    <template #custom="{ toggle, value }">
      <sar-list card>
        <sar-list-item
          v-for="option in options"
          :key="option.value"
          :title="option.label"
          hover
          @click="toggle(option.value)"
        >
          <template #value>
            <sar-icon
              v-if="option.value === value"
              color="var(--sar-red)"
              size="32rpx"
              name="success"
            />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option2");
const options = [
  { value: "option1", label: "\u9009\u98791" },
  { value: "option2", label: "\u9009\u98792" },
  { value: "option3", label: "\u9009\u98793" }
];
</script>

单选按钮组里面 radio 组件，会自动判断选中状态；可以给 radio 组件添加 readonly 属性以便将点击操作交给其他组件。

vue
<template>
  <sar-radio-group v-model="value" root-style="margin-top: 40rpx">
    <template #custom="{ toggle }">
      <sar-list card>
        <sar-list-item
          v-for="option in options"
          :key="option.value"
          :title="option.label"
          hover
          @click="toggle(option.value)"
        >
          <template #icon>
            <sar-radio readonly :value="option.value" />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

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

const value = ref('option2')

const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
]
</script>
vue
<template>
  <sar-radio-group v-model="value" root-style="margin-top: 40rpx">
    <template #custom="{ toggle }">
      <sar-list card>
        <sar-list-item
          v-for="option in options"
          :key="option.value"
          :title="option.label"
          hover
          @click="toggle(option.value)"
        >
          <template #icon>
            <sar-radio readonly :value="option.value" />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("option2");
const options = [
  { value: "option1", label: "\u9009\u98791" },
  { value: "option2", label: "\u9009\u98792" },
  { value: "option3", label: "\u9009\u98793" }
];
</script>

API ​

RadioProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
checked是否选中booleanfalse
value单选按钮的值，配合单选按钮组一起使用any-
label单选按钮标签string-
disabled禁用状态boolean-
readonly只读状态boolean-
size图标的尺寸string-
type图标类型'circle' | 'record''circle'
checked-color选中时图标的颜色string-

RadioSlots ​

插槽描述属性
default自定义默认内容-
icon自定义图标{ checked: boolean }

RadioEmits ​

事件描述类型
click点击时触发(event: any) => void

RadioGroupProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
model-value (v-model)指定选中的选项any-
disabled禁用状态boolean-
readonly只读状态boolean-
size图标的尺寸string-
type图标类型'circle' | 'record''circle'
checked-color选中时图标的颜色string-
direction排列方向'horizontal' | 'vertical''vertical'
validate-event是否触发表单验证booleantrue
options自动设置单选按钮RadioGroupOption[]-
option-keys自定义 options 的 label、value 的字段OptionKeys{label: 'label', value: 'value'}

RadioGroupOption ​

ts
export type RadioGroupOption =
  | {
      [key: PropertyKey]: any
    }
  | string
  | number
  | boolean

OptionKeys ​

ts
export interface OptionKeys {
  label?: string
  value?: string
}

RadioGroupSlots ​

插槽描述属性
default自定义默认内容-
custom同默认插槽，额外可以接收 toggle 方法切换选中状态，接收 value 属性判断选中状态；用于自定义单选按钮结构和样式{ toggle: (value: any) => void, value: any }

RadioGroupEmits ​

事件描述类型
update:model-value单选按钮组值改变时触发(value: any) => void
change单选按钮组值改变时触发(value: any) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-radio-group-column-gap: 24rpx;
  --sar-radio-group-row-gap: 16rpx;

  --sar-radio-icon-font-size: 40rpx;
  --sar-radio-icon-color: var(--sar-fourth-color);
  --sar-radio-icon-checked-color: var(--sar-primary);
  --sar-radio-icon-disabled-color: var(--sar-disabled-color);
  --sar-radio-icon-transition-duration: var(--sar-duration);

  --sar-radio-label-margin-left: 16rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao