Radio 组件使用教程
优质
小牛编辑
140浏览
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
中使用
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | string | 表单值,使用v-model 绑定 | -- | |
options | array | 可选列表,可以用字符串组成的数组或者 key=>value 的形式 | -- | |
fill-mode | boolean | false | 是否可填写 | -- |
fill-placeholder | string | 可填写时的提示文字 | -- | |
fill-label | string | 可填写时的label文字 | -- | |
disabled | boolean | 禁用操作 | v2.3.8 | |
selected-label-style | object | 设置选中时的 label 样式,比如使用其他颜色更容易区分是否为选中项 | v2.4.0 |
插槽
名字 | 说明 | 版本要求 |
each-item | 自定义如何显示每一项 | v2.3.5 |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@radio-checked-icon-color | #09BB07 | 选中状态的图标颜色 |