uniapp - 自定义状态组件

效果图如下

有时候，我们使用官方的<radio-group></radio-group>组件样式不太美观，用样式穿透也修改不了样式，这时就我们就可以自己定义一个组件

文章中用到的素材如下（图片可自己选更优美的）：

check.png

cancel.png

代码如下：

<template>
<view class="item">
	<view class="title">状态：</view>
	<view class="state">
		<view class="top">
			<view class="state-item" v-if="isShowLeft" @click="isStateShowLeft(false)">
				<view class="state-one"></view><view>正常</view>
			</view>
			<view class="state-item" v-if="!isShowLeft" @click="isStateShowLeft(true)">
				<view class="state-two"></view><view>正常</view>
			</view>
		</view>
		<view class="bottom">
			<view class="state-item" v-if="!isShowRight" @click="isStateShowRight(true)">
				<view class="state-one"></view><view>异常</view>
			</view>
			<view class="state-item" v-if="isShowRight" @click="isStateShowRight(false)">
				<view class="state-two"></view><view>异常</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
export default {
    data(){
        return{
			isShowLeft: true,
            isShowRight: true,
            // disabled传给接口的值
            disabled: 0, // 状态 0-正常  1-异常 这里我定义的默认0是正常的，对应着视图中的默认选中正常的状态
		}
    },
    methods: {
    	isStateShowLeft(bool) {
    		// 判断左边按钮如果当前选择的是已勾选状态，则ruturn出去
            if (this.isShowLeft) {
                return
            }
            if (bool) {
                this.isShowLeft = true;
                this.isShowRight = true;
                this.disabled = 0
            }
        },
        isStateShowRight(bool) {
        	// 判断右边按钮如果当前选择的是已勾选状态，则ruturn出去
            if (!this.isShowRight) {
                return
            }
            if (!bool) {
                this.isShowRight = false;
                this.isShowLeft = false;
                this.disabled = 1
            }
        },
	}
}
</script>

<style lang="scss">
.item{
    display: flex;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    .title{
        line-height: 60rpx;
    }
    .state{
        display: flex;
        margin-top: 14rpx;
        .state-item{
            display: flex;
            .state-one{
                background-image: url('选中状态图片路径/check.png');
                background-size: 32rpx;
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
            .state-two{
                background-image: url('未选中状态图片路径/cancel.png');
                background-size: 32rpx;
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
        }
        .top{
            margin-right: 20rpx;
        }
    }

}
</style>