Radio 单选框

基础用法

<vz-radio-group v-model="radioGroupValue">
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

禁用状态

<vz-radio-group v-model="radioGroupValue" disabled>
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

只读状态

<vz-radio-group v-model="radioGroupValue" readonly>
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

插槽

<vz-radio-group v-model="radioGroupValue">
  <vz-radio value="1">单选框一</vz-radio>
  <vz-radio value="2">单选框二</vz-radio>
  <vz-radio value="3">单选框三</vz-radio>
</vz-radio-group>

可取消

<vz-radio-group v-model="radioGroupValue" cancelable>
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

文本不换行

<vz-radio-group v-model="radioGroupValue" nowrap min-height="150rpx">
  <vz-radio value="1" label="豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。"></vz-radio>
  <vz-radio value="2" label="物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。"></vz-radio>
  <vz-radio value="3" label="雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。"></vz-radio>
</vz-radio-group>

自定义颜色

<vz-radio-group v-model="radioGroupValue" color="var(--app-color-success)" label-color="var(--app-color-info)">
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

自定义尺寸

<vz-radio-group v-model="radioGroupValue" size="40rpx" label-size="30rpx">
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

纵向排列

<vz-radio-group v-model="radioGroupValue" vertical>
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

下边框

<vz-radio-group v-model="radioGroupValue" vertical border>
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

右对齐

<vz-radio-group v-model="radioGroupValue" vertical border align="right">
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

单选框在右侧

<vz-radio-group v-model="radioGroupValue" vertical border box-placement="right">
  <vz-radio value="1" label="单选框一"></vz-radio>
  <vz-radio value="2" label="单选框二"></vz-radio>
  <vz-radio value="3" label="单选框三"></vz-radio>
</vz-radio-group>

Radio Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number / boolean	-
value	单选框的值	string / number / boolean	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
cancelable	选中后是否可取消	boolean	false
block	是否为块级元素	boolean	false
size	尺寸	string / number	1.2em
color	颜色（优先级低于 active-color 和 inactive-color）	string	-
active-color	选中时的颜色	string	--vz-color-primary
inactive-color	未选中时的颜色	string	--vz-border-color
label	文本内容	string	-
label-size	文本字体大小	string / number	inherit
label-color	文本字体颜色	string / number	inherit
align	文本对齐位置	left / center / right	left
nowrap	文本不能换行	boolean	false
box-placement	选择框相对文本位置	left / right	left
gap	选择框与文本的距离	string / number	--vz-gap-base
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Radio Events

事件名	说明	参数
change	当绑定值变化时触发的事件	string / number / boolean

Radio Slots

插槽名	说明
default	文本

Radio CSS

变量名	说明	默认值
--vz-radio-mr	margin-right	--vz-gap-larger
--vz-radio-active-color	props.activeColor	--vz-color-primary
--vz-radio-inactive-color	props.inactiveColor	--vz-border-color
--vz-radio-size	props.size	1.2em
--vz-radio-label-size	props.labelSize	inherit
--vz-radio-label-color	props.labelColor	inherit
--vz-radio-gap	props.gap	--vz-gap-base
--vz-radio-min-height	最小高度	-
--vz-radio-border-color	纵向排列时下边框颜色	--vz-border-color

Radio SCSS

$radio: (
  "size": 1.2em,
  "active-color": getCssVar("color", "primary"),
  "inactive-color": getCssVar("border-color"),
  "gap": getCssVar("gap", "base"),
  "box-disabled-bg-color": getCssVar("bg-color", "disabled"),
  "box-disabled-color": getCssVar("text-color", "disabled"),
);

Radio Group Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number / boolean	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
cancelable	选中后是否可取消	boolean	false
vertical	是否纵向排列	boolean	false
size	尺寸	string / number	1.2em
color	颜色（优先级低于 active-color 和 inactive-color）	string	-
active-color	选中时的颜色	string	--vz-color-primary
inactive-color	未选中时的颜色	string	--vz-border-color
label-size	文本字体大小	string / number	inherit
label-color	文本字体颜色	string / number	inherit
align	文本对齐位置	left / center / right	left
nowrap	文本不能换行	boolean	false
min-height	最小高度，纵向时为 radio 最小高度	boolean	--vz-height-base
box-placement	选择框相对文本位置	left / right	left
group-gap	横向排列时复选框之间的距离	boolean	--vz-gap-larger
gap	选择框与文本的距离	string / number	--vz-gap-base
border	纵向排列时是否显示 radio 下边框	boolean	false
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Radio Events

事件名	说明	参数
change	当绑定值变化时触发的事件	string / number / boolean

Radio Group CSS

变量名	说明	默认值
--vz-radio-group-min-height	props.minHeight	--vz-height-base
--vz-radio-group-gap	props.groupGap	--vz-gap-larger
--vz-radio-group-border-color	纵向排列时 radio 下边框颜色	--vz-border-color

Radio Group SCSS

$radio-group: (
  "min-height": getCssVar("height", "base"),
  "gap": getCssVar("gap", "larger"),
  "border-color": getCssVar("border-color"),
);