uniapp checkbox二次封装

js yekong

uniapp uview u-checkbox复选二次封装

使用

<checkboxCom :value.sync="is_virtul"></checkboxCom>

代码封装

/**
* @Author: 858834013@qq.com
* @Name: checkboxCom
* @Date: 2022-05-14
* @Desc: checkbox封装同步选择
*/
<template>
	<view class="lbtk_gyf_main_money_material">
		<checkbox-group @change="change">
			<checkbox :checked="value"></checkbox>
		</checkbox-group>
		<text>自定义</text>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		methods: {
			change() {
				this.$emit("update:value", !this.value)
			},
		}
	}
</script>

<style lang="scss">
	.lbtk_gyf_main_money_material {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-right: 10upx;
	}

	.lbtk_gyf_main_money_material checkbox-group {
		margin-bottom: -10upx;
	}

	.lbtk_gyf_main_money_material text {
		color: #6f401e;
		font-size: 42upx;
		margin-left: 7upx;
	}
</style>

喜欢