uniapp封装组件，选中后右上角显示对号√样式（通过css实现）

效果：

一、组件封装

1、在项目根目录下创建components文件夹，自定义组件名称，我定义的是xc-button

2、封装组件代码

<template>
	<view class="handle-btn">
		<view :class="handleIdCode == '1' ? 'select' : 'unSelect'" @click="agreeBtn">
			{{agreeLabel}}
		</view>
		<view :class="handleIdCode == '0' ? 'select' : 'unSelect'" @click="unAgreeBtn">
			{{unAgreeLabel}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"xc-button",
		props:{
			handleId:{
				type: String,
				default:"",
			},
			//lable值
			agreeLabel: {
				type: String,
				default:"",
			},
			//lable值
			unAgreeLabel: {
				type: String,
				default:"",
			}
		},
		data() {
			return {
				handleIdCode:''
			};
		},
		methods:{
			agreeBtn(){
				this.handleIdCode = '1',
				this.$emit('agreeBtn')
			},
			unAgreeBtn(){
				this.handleIdCode = '0',
				this.$emit('unAgreeBtn')
			},
		},
		onLoad() {
			this.handleIdCode = this.handleId
		}
	}
</script>

<style lang="scss">
// 按钮样式	
.handle-btn{
	display: flex;
}
.select {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16rpx 32rpx;
	width: 120rpx;
	height: 56rpx;
	border-radius: 2px;
	margin: 0 10rpx;
    background-color: #E8F3FF;
    color: #5999fc;
}
.select:before {
	    content: '';
	    position: absolute;
	    right: 0;
	    top: 0;
	    border: 24rpx solid #5999fc;
	    border-top-color: transparent;
	    border-left-color: transparent;
		transform: rotate(-90deg);
	}
	.select:after {
	    content: '';
	    width: 2px;
	    height: 5px;
	    position: absolute;
	    right: 3px;
	    top: 5px;
	    border: 1px solid #fff;
	    border-top-color: transparent;
	    border-left-color: transparent;
	    transform: rotate(45deg);
	}
.unSelect{
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 16rpx 32rpx;
			width: 120rpx;
			height: 56rpx;
			background: #F8F8F8;
			border: 0.5px solid #F8F8F8;
			border-radius: 2px;
			margin: 0 10rpx;
		}
</style>

二、在页面中使用组件

<template>
	<view>
			<xc-button agreeLabel="是"  unAgreeLabel="否" handleId="1" @agreeBtn="agreeBtn" @unAgreeBtn="unAgreeBtn">
			</xc-button>
		</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			agreeBtn() {
				console.log('是被触发了')
			},
			unAgreeBtn() {
				console.log('否被触发了')
			},
		}
	}
</script>

<style lang="scss">

</style>