多端小程序通用 radio-group

水深无声 2021-09-30 15:20 413阅读 0赞

前言：

1.除了支付宝外的小程序 radio都可以重复点击，确认取消

2.之前多选按钮是自己的手撸控件，为了还原设计效果

3.微信端label需要设置 block属性

<template>
    	<view class="page">
    		<view class="container" v-if="isok">
    			<view class="content">
    				<text class="t1">订单已取消</text>
    				<view class="t2" @click="reOrder">重新预约</view>
    
    				<view class="resonBox">
    					<text class="r1">请告诉我们原因</text>
    					<radio-group @change="radioChange" class="radioGroup">
    						<label v-for="(item, index) in items" :key="index">
    							<radio :checked="item.checked" :value="item.name" @click=""></radio>
    							<text >{
       { item.value }}</text>
    						</label>
    					</radio-group>
    				</view>
    			</view>
    			
    			
    			
    			
    			
    		</view>
    	</view>
    </template>
    
    <script>
    let _self;
    export default {
    	data() {
    		return {
    			isok: true,
    			items: [
    				{ name: '1', value: '计划有变，暂时不需要服务了' },
    				{ name: '2', value: '赶时间，更改为其他服务方式'},
    				{ name: '3', value: '预约信息有误' },
    				{ name: '4', value: '误发预约' },
    				{ name: '5', value: '其他' }
    			]
    		};
    	},
    	onLoad() {
    		_self = this;
    	},
    	methods: {
    		reOrder() {},
    		plan() {
    			_self.isPlan = !_self.isPlan;
    		},
    		radioChange(e){
    			console.log(e.detail.value);
    		}
    	}
    };
    </script>
    
    <style lang="less">
    .content {
    	padding: 50upx 60upx;
    	text-align: left;
    	font-family: PingFangSC-regular;
    	.t1 {
    		color: rgba(16, 16, 16, 1);
    		font-size: 56upx;
    	}
    	.t2 {
    		margin-left: 145upx;
    		background-color: rgba(255, 255, 255, 1);
    		color: rgba(153, 153, 153, 1);
    		font-size: 28upx;
    		text-align: center;
    		font-family: Arial;
    		border: 2upx solid rgba(255, 255, 255, 0);
    		display: inline-block;
    		vertical-align: middle;
    		position: relative;
    		top: -15upx;
    	}
    
    	.radioGroup {
    		height: 430upx;
    	}
    	.radioGroup > label {
    		margin-top: 25upx;
    		width: 100%;
    		height: 45upx;
    		display: block;
    	}
    	.radioGroup > label > text {
    		margin-left: 15upx;
    		vertical-align: middle;
    	}
    
    	.resonBox {
    		margin-top: 80upx;
    		.r1 {
    			color: rgba(16, 16, 16, 1);
    			font-size: 28upx;
    		}
    		radio {
    			vertical-align: middle;
    		}
    	}
    }
    </style>