Vue 选项卡dome

HTML

    
回复我的
    
收到的赞
    
新增粉丝
    
系统通知
    
消息设置

JS

// 处理选中
        handleActive(event) {
            let target = event.targe || event.srcElement;

            if (this.target) {
                if (this.target == target) {
                    // 重复点击了
                    return;
                }
            }
            this.target = target;

            let v = document.querySelector('.router-link-active');
            if (v) {
                this.removeActiveClass(v);
            }

            // Array.prototype.forEach.call(document.querySelectorAll('li'), this.removeActiveClass);
            target.className = 'router-link-active';
        },

        removeActiveClass(node) {
            // console.log(node);
            node.className = '';
        },

CSS

ul {
            background: #fff;
            padding: 8px 0;
            border-radius: 2px;

            li {
                height: 48px;
                line-height: 48px;
                font-size: 14px;
                color: #555666;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: relative;
                text-align: center;
                cursor: pointer;
                user-select: none;
            }

            .router-link-active {
                color: #2faee3;
                background: #fafafa;
            }
        }