话不多说，直接上代码

---

<template>

    <div class="box" :class="{active:checked == label}" @click="change">

        <span class="sq"></span>

        <slot></slot>

    </div>

</template>

<script>

export default {

    props:['checked','label'],

    model: {

        prop: 'checked',

        event: 'change'

    },

    methods:{

        change(){

            this.$emit('change',this.label)

        }

    }

}

</script>

<style scoped>

.box{

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: .16rem;

    color:#9da0a7;

}

.box .sq{

    width: .16rem;

    height: .16rem;

    position: relative;

    border-radius: 2px;

    margin-right: 8px;

}

.box .sq::after{

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    border: 1px solid #ccc;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 200%;

    height: 200%;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    -webkit-transform-origin: left top;

    transform-origin: left top;

    border-radius: 2px;

}

.active{

    color: #81b6fc;

}

.active .sq{

    background: #81b6fc;

}

.active .sq::after{

    background: #81b6fc;

    border: 1px solid #81b6fc;

}

</style>

使用

---

<my-radio label="1" v-model="selectedType">不同意</my-radio>