import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Radio \u5355\u9009\u6846

\u4ECB\u7ECD

\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { RadioGroup, Radio } from 'vant';

const app = createApp();
app.use(Radio);
app.use(RadioGroup);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 v-model \u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name\u3002

<van-radio-group v-model="checked">
  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};

\u6C34\u5E73\u6392\u5217

\u5C06 direction \u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal \u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002

<van-radio-group v-model="checked" direction="horizontal">
  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u7981\u7528\u72B6\u6001

\u901A\u8FC7 disabled \u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728 Radio \u4E0A\u8BBE\u7F6E disabled \u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002

<van-radio-group v-model="checked" disabled>
  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u81EA\u5B9A\u4E49\u5F62\u72B6

\u5C06 shape \u5C5E\u6027\u8BBE\u7F6E\u4E3A square\uFF0C\u5355\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002

<van-radio-group v-model="checked">
  <van-radio name="1" shape="square">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2" shape="square">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7 checked-color \u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002

<van-radio-group v-model="checked">
  <van-radio name="1" checked-color="#ee0a24">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2" checked-color="#ee0a24">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u81EA\u5B9A\u4E49\u5927\u5C0F

\u901A\u8FC7 icon-size \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002

<van-radio-group v-model="checked">
  <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u81EA\u5B9A\u4E49\u56FE\u6807

\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5E76\u901A\u8FC7 slotProps \u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001\u3002

<van-radio-group v-model="checked">
  <van-radio name="1">
    \u5355\u9009\u6846 1
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </van-radio>
  <van-radio name="2">
    \u5355\u9009\u6846 2
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </van-radio>
</van-radio-group>

<style>
  .img-icon {
    height: 20px;
  }
</style>

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return {
      checked,
      activeIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};

\u7981\u7528\u6587\u672C\u70B9\u51FB

\u8BBE\u7F6E label-disabled \u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u5355\u9009\u6846\u5207\u6362\u3002

<van-radio-group v-model="checked">
  <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>
  <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>
</van-radio-group>

\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528

\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell \u548C CellGroup \u7EC4\u4EF6\u3002

<van-radio-group v-model="checked">
  <van-cell-group inset>
    <van-cell title="\u5355\u9009\u6846 1" clickable @click="checked = '1'">
      <template #right-icon>
        <van-radio name="1" />
      </template>
    </van-cell>
    <van-cell title="\u5355\u9009\u6846 2" clickable @click="checked = '2'">
      <template #right-icon>
        <van-radio name="2" />
      </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>

API

Radio Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57any-
shape\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
disabled\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001booleanfalse
label-disabled\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FBbooleanfalse
label-position\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A leftstringright
icon-size\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string20px
checked-color\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa

RadioGroup Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26any-
disabled\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846booleanfalse
direction\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontalstringvertical
icon-size\u6240\u6709\u5355\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string20px
checked-color\u6240\u6709\u5355\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa

Radio Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u5355\u9009\u6846\u65F6\u89E6\u53D1event: MouseEvent

RadioGroup Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6name: string

Radio Slots

\u540D\u79F0\u8BF4\u660E\u53C2\u6570
default\u81EA\u5B9A\u4E49\u6587\u672C-
icon\u81EA\u5B9A\u4E49\u56FE\u6807{ checked: boolean, disabled: boolean }

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type {
  RadioProps,
  RadioShape,
  RadioGroupProps,
  RadioLabelPosition,
  RadioGroupDirection,
} from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-radio-size20px-
--van-radio-border-colorvar(--van-gray-5)-
--van-radio-transition-durationvar(--van-animation-duration-fast)-
--van-radio-label-marginvar(--van-padding-xs)-
--van-radio-label-colorvar(--van-text-color)-
--van-radio-checked-icon-colorvar(--van-primary-color)-
--van-radio-disabled-icon-colorvar(--van-gray-5)-
--van-radio-disabled-label-colorvar(--van-text-color-3)-
--van-radio-disabled-background-colorvar(--van-border-color)-
`,22),c=[p],i={__name:"README.zh-CN",setup(d,{expose:s}){return s({frontmatter:{}}),(o,r)=>(a(),n("div",l,c))}};export{i as default};