Radio

demo 原始链接demo 源码编辑文档组件源码

radio - 图1

二维码

radio - 图2

安装

局部注册

全局注册

  1. import { Radio } from 'vux'
  3. export default {
  4.   components: {
  5.     Radio
  6.   }
  7. }

  1. // 在入口文件全局引入
  3. import Vue from 'vue'
  4. import { Radio } from 'vux'
  6. Vue.component('radio', Radio)
  1.   <group>
  2.     <radio title="title" :options="options" v-model="value"></radio>
  3.   </group>

options可以为简单数组，也可以为key=>value形式键值对

  1. const options = [ 'China', 'Japan' ]
  3. const options2 = [{
  4.   icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  5.   key: '001',
  6.   value: 'radio001'
  7. }, {
  8.   icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  9.   key: '002',
  10.   value: 'radio002'
  11. }]

radio只能在Group中使用

属性

名字类型默认值说明版本要求
valuestring表单值，使用v-model绑定—
optionsarray可选列表，可以用字符串组成的数组或者 key=>value 的形式—
fill-modebooleanfalse是否可填写—
fill-placeholderstring可填写时的提示文字—
fill-labelstring可填写时的label文字—
disabledboolean禁用操作v2.3.8
selected-label-styleobject设置选中时的 label 样式，比如使用其他颜色更容易区分是否为选中项v2.4.0

插槽

名字说明版本要求
each-item自定义如何显示每一项v2.3.5
## 样式变量
名字默认值说明继承自变量
@radio-checked-icon-color #09BB07 选中状态的图标颜色

相关 issue

贡献者

该组件(包含文档)迭代次数 22，贡献人数 1airyland

发布日志

  • v2.4.0 [feature] 添加属性 prop:selected-label-style 来支持定义选中项的文字样式
  • v2.3.8 [feature] 支持 prop:disabled 禁用操作 #1254
  • v2.3.8 [feature] 支持 less 变量 @radio-checked-icon-color #896
  • v2.3.5 [feature] 支持自定义渲染每一列 slot:each-item
  • v2.1.1-rc.13 [fix] 修复未响应数据变更的 bug #1115
  • v2.1.1-rc.1 [feature] 支持左侧图标