VUE.js radio入门级简单封装
话不多说，直接上代码
<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>
