VantUI不像ElementUI,单选和多选有按钮样式,设置type="button"就好了,在VantUI中我们研究发现,单选和多选设置选中时,只有前面的图标改为了选中状态而文字没有改变,我们可以利用van-radio和van-checkbox的自定义图标功能,将单选和多选改为按钮样式
以单选为例:
HTML:
<van-field name="radio" :rules="rules" :error-message="rules.message">
<template #input>
<van-radio-group v-model="radio">
<van-radio v-for="(item,index) in data.items" :key="index" :name="item.itemValue" style="margin-bottom:12px;">
<template #icon="props">
<van-button size="small" round v-if="props.checked" color="#C3070s">{{item.itemText}}</van-button>
<van-button size="small" round v-else>{{item.itemText}}</van-button>
</template>
</van-radio>
</van-radio-group>
</template>
</van-field>
CSS:
/deep/ .van-radio__icon {
height: 100% !important;
}
/deep/ .van-button--small {
padding: 0 15px !important
}
单选预览样式为:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)