cv-radio-group 单选框 ¶
简要 ¶
本组件一般用单项选择
普通单选,一般和表单配合使用,默认为实心白色背景。
示例 ¶
vue
<template>
<view class="content">
<view class="components-title">
<view class="components-title-t">cv-radio-group</view>
<view class="components-title-d">单选</view>
</view>
<cv-form-base ref="refFormBase" :rules="formRules" :model="formData" labelWidth="75" style="padding: 0 10px">
<cv-form-item label="默认单选" required>
<cv-radio-group v-model="formData.radio1" dataType="text" :dataLists="radioLists" />
<template v-slot:tip>请选择一个你最喜欢的</template>
</cv-form-item>
<cv-form-item label="默认单选" required labelPosition="top">
<cv-radio-group v-model="formData.radio2" :dataLists="radioLists" />
<template v-slot:tip>请选择一个你最喜欢的</template>
</cv-form-item>
<cv-form-item label="标签单选" required>
<cv-radio-group type="tag" v-model="formData.radio3" :dataLists="radioLists" />
<template v-slot:tip>请选择一个你最喜欢的</template>
</cv-form-item>
<cv-form-item label="标签单选" required labelPosition="top">
<cv-radio-group type="tag" v-model="formData.radio3" :dataLists="radioLists" />
<template v-slot:tip>请选择一个你最喜欢的</template>
</cv-form-item>
</cv-form-base>
</view>
</template>
<script>
export default {
data() {
return {
formRules: {},
formData: {
radio: '',
radio1: ''
},
radioLists: []
};
},
onLoad() {
setTimeout(() => {
this.$testReqMock().then((res) => {
this.radioLists = [
{ value: 0, valuea: 'a', text: '橘子' },
{ value: 1, valuea: 'b', text: '柠檬' },
{ value: 2, valuea: 'c', text: '香蕉' },
{ value: 3, valuea: 'd', text: '苹果' },
{ value: 4, valuea: 'e', text: '榴莲' }
];
this.$forceUpdate();
console.log('模拟请求数据--选项', this.radioLists);
});
}, 1000);
setTimeout(() => {
this.$testReqMock().then((res) => {
this.formData.radio1 = '香蕉';
this.formData.radio2 = 1;
this.formData.radio3 = 3;
this.formData.radio3 = 3;
console.log('模拟请求数据--选中', this.formData);
});
}, 2000);
},
methods: {
bindTimeChange(e) {},
clickTest(e) {
console.log(this.formData.checkboxtag);
}
}
};
</script>
属性 ¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | String | - | 数据双向绑定 |
dataType | String | value | 数据类型['value','text'] |
dataLists | Array | - | 选项,展示数据 |
dataValue | String | value | dataLists中value的标识 |
dataText | String | text | dataLists中text的标识 |