仿写单选框/多选框

阻止change事件冒泡： @click.stop

vue 阻止事件方法

.stop 

.prevent  //阻止默认行为

.capture  //冒泡优先执行

.self  // 仅当前

.once // 点击回调只触发一次

单选框

<div v-for="item in radiolist"
:key="item.value" 
class="box-flex-start" 
@click="handleChange(item)">
	<span class="radio-circle" :class="{'is-active': item.value == radio}"></span>
	<span>{{ item.label }}</span>
</div>

handleChange(item) {
	this.radio = item.value;
}

<style lang="scss" scoped>
.radio-circle{
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    margin-right: 5px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
}
.is-active{
    border: 1px solid #409EFF;
    background-color: #409EFF;
    position: relative;
    &::after{
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        transition: transform .15s ease-in;
    }
}
</style>

多选框

<div class="checkbox-dynamic">
	<div v-for="item in checkboxList"
	:key="item.value" class="box-flex-start" @click="handleChange(item)">
		<span class="checkbox-square" :class="{'is-active': boxList.indexOf(item.value) !=-1 }"></span>
		<span>{{ item.label }}</span>
	</div>
</div>

handleChange(item) {
	if (!this.isEditor) {
		this.boxList.indexOf(item.value) != -1 
		? this.boxList.splice(this.boxList.indexOf(item.value), 1)
		: this.boxList.push(item.value);
		this.element.value = this.boxList;

		if(this.element.action.modifyEvent){
			let params = this.element.name;
			this.eventRecursion(this.currentLevelStore.componentData,params)
		}
	}
}

<style lang="scss" scoped>
.checkbox-square{
    display: inline-block;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    margin-right: 5px;
    cursor: pointer;
}
.is-active{
    border: 1px solid #409EFF;
    background-color: #409EFF;
    position: relative;
    &::after{
        box-sizing: content-box;
        content: "";
        border: 1px solid #FFF;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(1);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
    }
}
</style>