cv-radio-opt-tag 单选标签样式 ¶
简要 ¶
本组件一般用单项选择
单选标签,一般和表单配合使用,默认为实心白色背景。
示例 ¶
vue
<template>
<view class="content">
<view class="components-title">
<view class="components-title-t">cv-radio-opt-tag</view>
<view class="components-title-d">标签样式</view>
</view>
<cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px">
<cv-form-item label="单选标签" labelWidth="75" required>
<cv-radio-group v-model="formData.radio1">
<cv-radio-opt-tag :value="item.value" v-for="(item, index) in radioLists" :key="index">
{{ item.text }}
</cv-radio-opt-tag>
</cv-radio-group>
<template v-slot:tip>您需要选择一个最喜爱的水果</template>
</cv-form-item>
<cv-form-item label="单选标签" labelWidth="75" labelPosition="top" required>
<cv-radio-group v-model="formData.radio2">
<cv-radio-opt-tag value="1111">单选1</cv-radio-opt-tag>
<cv-radio-opt-tag value="2222">单选2</cv-radio-opt-tag>
<cv-radio-opt-tag value="3333">单选3</cv-radio-opt-tag>
</cv-radio-group>
<template v-slot:tip>您需要选择一个最喜爱的水果</template>
</cv-form-item>
</cv-form-base>
</view>
</template>
<script>
export default {
data() {
return {
formRules: {},
formData: {
radio1: 0,
radio2: 0
},
radioLists: []
};
},
watch: {
testRadio(formData) {
console.log('----formData---', newVal);
}
},
onLoad() {
setTimeout(() => {
this.$testReqMock().then((res) => {
this.radioLists = [
{ value: 0, text: '橘子' },
{ value: 1, text: '柠檬' },
{ value: 2, text: '香蕉' },
{ value: 3, text: '苹果' },
{ value: 4, text: '榴莲' }
];
console.log('模拟请求数据--选项', this.radioLists);
});
this.label1 = '单选122';
this.checked = true;
}, 1000);
setTimeout(() => {
this.$testReqMock().then((res) => {
this.formData.radio1 = 1;
this.formData.radio2 = 3333;
console.log('模拟请求数据--选中', this.formData);
});
}, 2000);
},
methods: {
bindTimeChange(e) {},
clickTest(e) {
console.log(this.formData.checkboxtag);
}
}
};
</script>
属性 ¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | - | 选后的值 |
label | String | 文本展示 | |
checked | Boolean | - | 是否选择 |