当前位置: 首页 > 文档资料 > VUX 中文文档 >

Radio 组件使用教程

优质
小牛编辑
146浏览
2023-12-01

安装

import { Radio } from 'vux'

export default {
  components: {
    Radio
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Radio } from 'vux'

Vue.component('radio', Radio)
  <group>
    <radio title="title" :options="options" v-model="value"></radio>
  </group>

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

const options = [ 'China', 'Japan' ]

const options2 = [{
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '001',
  value: 'radio001'
}, {
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '002',
  value: 'radio002'
}]

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选中状态的图标颜色