Radio

Radio

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

radio - 图1

二维码

radio - 图2

Install

安装

局部注册

全局注册

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

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Radio } from 'vux'
  4. 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' ]
  2. const options2 = [{
  3. icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  4. key: '001',
  5. value: 'radio001'
  6. }, {
  7. icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  8. key: '002',
  9. value: 'radio002'
  10. }]

radio只能在Group中使用

API

属性

名字类型默认值说明版本要求
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

Variables

## 样式变量


名字默认值说明继承自变量
@radio-checked-icon-color #09BB07 选中状态的图标颜色

Issues

相关 issue

贡献者

贡献者

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

Changelog

发布日志

  • 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] 支持左侧图标