仿寫單選框/多選框
阿新 • • 發佈:2022-03-25
阻止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>