通过事件委托给子元素添加active

通过事件委托给子元素添加active

html

<div class="rightMenu" @click="checkMenu">
        <span>item1</span>
        <span>itme2</span>
        <span>itme3</span>
        <span>itme4</span>
        <span>itme5</span>
        <span>itme6</span>
</div>

js

checkMenu(event) {
// 移除active
    let children = event.target.parentElement.children
    for (let item of children) {
        item.className = ''
    }
// 当前元素添加active
    if (event.target.nodeName.toLowerCase() == 'span') {
        event.target.className = 'active'
    }
},

css

.rightMenu {
        padding: 8px 0;
        display: inline-block;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 12px;
        font-family: GTEestiProText-Medium;
        line-height: 12px;
        color: #303133;
        span {
            padding: 7px 19px;
            border-right: 1px solid #dcdfe6;
        }
        span:last-child {
            border: none;
        }
        span:hover {
            cursor: pointer;
            // background: #e6f1fc;
            // color: #1989fa;
            // border: 1px solid #a3d0fd;
        }
        span.active {
            background: #e6f1fc;
            color: #1989fa;
            border: 1px solid #a3d0fd;
        }
}