Radio 单选按钮

优质

小牛编辑

134浏览

2023-12-01

import { Radio } from 'feui';
components: {
  [Radio.name]: Radio
},
data() {
  return {
    radio001: ["安徽", "北京"],
    radio001Value: "安徽",
    radio002Value: "北京",
    radio003: [
      { icon: "http://temp.im/50x50/f17c67/fff", key: "001", value: "珊瑚朱"},
      { icon: "http://temp.im/50x50/008573/fff", key: "002", value: "松石绿"},
      { icon: "http://temp.im/50x50/228fbd/fff", key: "003", value: "浅缥色"}
    ],
    ],
    selected: { color: "#4a90e2" }
  };
},

代码演示

基础用法

<fe-group title="基本用法">
  <fe-radio :options="radio001" @on-change="change"></fe-radio>
</fe-group>

默认选择、不可用

<fe-group title="选中的 '安徽'">
  <fe-radio :options="radio001" value="安徽" disabled></fe-radio>
</fe-group>

自定义选中颜色

<fe-group :title="'已填充选中颜色 '+radio001Value">
  <fe-radio fill-mode :options="radio001" v-model="radio001Value" 
    :selected-label-style="selected"  @on-change="change">
  </fe-radio>
</fe-group>

自定义占位符和标签

<fe-group title="自定义占位符和标签">
  <fe-radio fill-mode fill-label="Other" fill-placeholder="填写其他的哦" 
    :options="radio001" @on-change="change">
  </fe-radio>
</fe-group>

自定义占位符和标签

<fe-group title="对象选项">
  <fe-radio fill-mode fill-label="Other" fill-placeholder="other" 
    :options="radio003" @on-change="change">
  </fe-radio>
</fe-group>

API

参数	说明	类型	默认值	可选值
value	表单值，使用v-model绑定	`String`	-	-
options	可选列表，可以用字符串组成的数组或者 `key=>value` 的形式	`Array`	-	-
fill-mode	是否可填写	`Boolean`	`false`	`false`,`true`
fill-placeholder	可填写时的提示文字	`String`	-	-
fill-label	可填写时的label文字	`String`	-	-
disabled	禁用操作	`Boolean`	`false`	`false`,`true`
selected-label-style	设置选中时的`label`样式	`Object`	-	-
-	-	-	-	-

Slots

Slot名	说明	备注
each-item	自定义如何显示每一项	-
-	-	-