fny-ugd-palace-uniapp/components/c-radio/c-radio.vue

<template>
	<view @click="_click" style="padding-left: 10px;padding-top: 10px;padding-bottom: 10px;">
		<view class="switch" :class="{active: isChecked}" >
			<view class="switch-tap">
				<u-icon v-if="isChecked" name="checkmark" color="#333" size="14"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: false,
				_cols: 1
			};
		},
		props: {
			value: false,
			defaultLabel: {
				type: String,
				default: '关闭'
			},
			defaultVal: {
				type: String | Number,
				default: '关'
			},
			activeLabel: {
				type: String,
				default: '开启'
			},
			activeVal: {
				type: String | Number,
				default: '开'
			},
			checked: {
				type: Boolean,
				default: false
			}
		},
		created() {
			
		},
		mounted() {
			// 初始化值
			if(String(this.value) == 'true'){
				this.isChecked = true;
				// this.$emit('input',this.activeVal)
			}else{
				this.isChecked = false;
				// this.$emit('input',this.defaultVal)
			}
		},
		watch:{
			value(nval,oVal){
				// 初始化值
				if(String(nval) == 'true'){
					this.isChecked = true;
					// this.$emit('input',this.activeVal)
				}else{
					this.isChecked = false;
					// this.$emit('input',this.defaultVal)
				}
			}
		},
		methods: {
			_click() {
				// 触发改变事件
				this.isChecked = !this.isChecked;
				if(String(this.isChecked) == 'true'){
					this.$emit('input',true)
				}else{
					this.$emit('input',false)
				}
				this.$forceUpdate()
			}
		},
		beforeDestroy() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.switch{
		position: relative;
		display: flex;
		width: 30rpx;
		height: 30rpx;
	    transition: background-color 0.2s;
		border: 1px solid #dedede;
		border-radius: 50%;
		font-size: 24rpx;
		&.active{
			border: 1px solid #333;
		}
	}
</style>