个性化单选和复选组件在网页设计中非常常见，它们不仅能够提升用户界面的美观度，还能改善用户体验。此组件是使用vue uniapp实现的个性化单选复选组件。设计完成后，点击生成源码即可。
拖动组件过设计区
每行显示数量
默认支持每行三个，可以上面选择属性每行显示个数。
选择图标在右
某些场景下，为了更好的效果，选择图标希望在右边显示，设计器同样考虑到了，只需要开启图标在右属性。
标题换行
标题换行是指标题跟选择项不在同一行.
个性化选择图标
默认单选比较单调，可视化支持自定义默认图片及选中后图片。
个性化单选内容
首先要设计一个显示的FLEX组件效果，然后把设计好的FLEX组件往单选节点里拖动即可。
保存源码至本地
再次点击保存源码至本地，本地个性化单选复选按钮就变成了不同效果。
回调事件
用户选择单选复选后希望触发后面的事件逻辑处理，可视化工具提供了回调事件，配置自己回调事件即可处理接下来你想要的操作。
生成源码
点击查看源码或者保存源码至本地，都可以快速看见设计的源码 。
<template> <view class="container container21094"> <u-form-item class="diygw-col-24" label="单选" labelPosition="top" prop="radio"> <u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="radio" :iconSize="20"> <u-radio activeImg="/static/lw.png" img="/static/lw-1.png" class="diygw-col-24" shape="circle" v-for="(radioitem, radioindex) in radioDatas" :key="radioindex" :name="radioitem.value"> <view class="flex text-left flex-content diygw-col-24"> <view class="flex diygw-col-24 flex-direction-column items-start flex-wrap flex7-clz"> <view class="flex diygw-col-24 items-center flex-nowrap"> <view class="flex flex-wrap diygw-col-0 flex-direction-column flex15-clz"> <text class="diygw-col-0 text3-clz"> {{ radioitem.label }} </text> <text class="diygw-col-0 text16-clz"> 添加客户信息 </text> </view> <image src="/static/icon1_kf.png" class="image2-size diygw-image diygw-col-0 image2-clz" mode="widthFix"></image> </view> </view> </view> </u-radio> </u-radio-group> </u-form-item> <u-form-item class="diygw-col-24 radio1-clz" labelPosition="top" prop="radio1"> <u-radio-group iconPlacement="right" class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="radio1" :iconSize="16"> <u-radio activeImg="/static/g.png" img="/static/g1.png" class="diygw-col-24" shape="circle" v-for="(radio1item, radio1index) in radio1Datas" :key="radio1index" :name="radio1item.value"> {{ radio1item.label }} </u-radio> </u-radio-group> </u-form-item> <u-form-item class="diygw-col-24" label="单选" labelPosition="top" prop="radio2"> <u-radio-group iconPlacement="right" class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="radio2"> <u-radio class="diygw-col-24" shape="circle" v-for="(radio2item, radio2index) in radio2Datas" :key="radio2index" :name="radio2item.value"> {{ radio2item.label }} </u-radio> </u-radio-group> </u-form-item> <view class="flex flex-wrap diygw-col-24 flex13-clz"> </view> <view class="clearfix"></view> </view> </template> <script> export default { data() { return { //用户全局信息 userInfo: {}, //页面传参 globalOption: {}, //自定义全局变量 globalData: {}, radioDatas: [ { value: '1', label: '综合排序', checked: true }, { value: '2', label: '总价从低至高', checked: false }, { value: '3', label: '总价从高至低', checked: false }, { value: '4', label: '单价从低至高', checked: false }, { value: '5', label: '单价从高至低', checked: false } ], radio: '1', radio1Datas: [ { value: '1', label: '综合排序', checked: true }, { value: '2', label: '总价从低至高', checked: false }, { value: '3', label: '总价从高至低', checked: false }, { value: '4', label: '单价从低至高', checked: false }, { value: '5', label: '单价从高至低', checked: false } ], radio1: '1', radio2Datas: [ { value: '1', label: '选项一', checked: true }, { value: '2', label: '选项二', checked: false }, { value: '3', label: '选项三', checked: false } ], radio2: '1' }; }, onShow() { this.setCurrentPage(this); }, onLoad(option) { this.setCurrentPage(this); if (option) { this.setData({ globalOption: this.getOption(option) }); } this.init(); }, methods: { async init() {} } }; </script> <style lang="scss" scoped> .flex7-clz { padding-top: 20rpx; border-bottom-left-radius: 12rpx; padding-left: 20rpx; padding-bottom: 20rpx; border-top-right-radius: 12rpx; margin-right: 10rpx; background-color: #f7faff; margin-left: 10rpx; flex-shrink: 0; overflow: hidden; width: calc(100% - 10rpx - 10rpx) !important; border-top-left-radius: 12rpx; margin-top: 10rpx; border-bottom-right-radius: 12rpx; margin-bottom: 10rpx; padding-right: 20rpx; } .flex15-clz { flex: 1; } .text3-clz { flex: 1; font-size: 30rpx !important; } .text16-clz { color: #a9a9a9; } .image2-clz { border: 2rpx solid #fbfbfb; border-bottom-left-radius: 120rpx; overflow: hidden; border-top-left-radius: 120rpx; border-top-right-radius: 120rpx; border-bottom-right-radius: 120rpx; } .image2-size { height: 80rpx !important; width: 80rpx !important; } .radio1-clz { font-weight: bold; font-size: 28rpx !important; } .flex13-clz { padding-top: 10rpx; padding-left: 10rpx; padding-bottom: 10rpx; padding-right: 10rpx; } .container21094 { } </style>
