如何在全局点击事件中切换选定的类？

Question

我在vue中创建我的组件库，我定义了我的组件checkbox，代码是这样的：

<template>
    <div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">
        <span class="j-checkbox">
            <input type="checkbox" />
        </span>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isSelected: false
            }
        },
        methods: {
            clickevent(event) {
                if(this.isSelected) {
                    this.isSelected = false;
                } else {
                    this.isSelected = true;
                }
            }
        },
    }
</script>

现在，我希望当我点击复选框将数据“isSelected”设为false时，我可以给组件类“checkboxcont-selected-last”，当我点击其他checkbox组件时，类名 "checkboxcont-selected-last" 可以删除，我怎样才能听我的点击事件来完成它？我尝试使用原生 JavaScript 代码添加 dom 的类名，但是当我将组件的类名与 Vue.js 绑定时，它似乎什么都没有：

clickevent(event) {
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last");
    } else {
        this.isSelected = true;
    }
}

请问我该怎么做才能解决这个问题？

这是我使用 less 的样式代码：

<style lang="less" scoped rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont {
        display: inline-block;
        &:hover {
            cursor: pointer;
            .j-checkbox {
                border-color: @jbluelight;
            }
        }
    }
    .j-checkbox {
        position: relative;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid @border;
        border-radius: 3px;
        line-height: 12px;
        vertical-align: -3px;
        margin: 0 5px;
        z-index: 20;
        transition: all .2s linear;
        input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            /*display: none;*/
        }
    }
    .checkboxcont-selected {
        .j-checkbox {
            background: @jbluelight;
            border-color: @jbluelight;
            &:after {
                content: '';
                width: 4px;
                height: 7px;
                border: 2px solid white;
                border-top: none;
                border-left: none;
                position: absolute;
                left: 3px;
                top: 0;
                z-index: 30;
                transform: rotate(45deg) scale(1);
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont-selected-last .j-checkbox {
        border-color: @jbluelight;
    }
</style>

我最初的想法是我点击组件后使用this.$el添加类，因为我调度了点击事件，所以可以访问它，并且我只是无法访问其他组件：

if(this.isSelected) {
    this.isSelected = false;
    this.$el.classList.add("checkboxcont-selected-last")
} else {
    this.isSelected = true;
}

并且我在调度click事件时使用原生HTML DOM操作删除了类，因为我无法访问其他组件，所以clickevent的完整定义是：

clickevent(event) {
    let selectedLast = document.querySelector(".checkboxcont-selected-last");
    if(selectedLast) {
        selectedLast.classList.remove("checkboxcont-selected-last")
    }
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last")
    } else {
        this.isSelected = true;
    }
}

看起来不错，但是当我使用v-bind绑定我的组件的类名时，我无法添加我的组件的类名，是不是错了？并且当我将组件的类名与Vue绑定时是否无法使用原生HTML DOM操作？

Answer 1

动态添加或删除类的更好方法是使用v-bind:class。有多种方法可以添加基于 vue data 变量的动态类。

我看到你已经在使用它了：

<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">

所以这里这个 div 只有一个类：checkboxcont 如果isSelected 为假，两个类：checkboxcont and checkboxcont-selected 如果isSelected 为真。

编辑：

鉴于您想在另一个组件上向 DOM 添加一个类，我可以想到两种方法：

1. 使用 Web API：如果您知道要使用 Element.className 添加类的元素的 ID，则可以执行以下操作：

   var d = document.getElementById("yourElem") d.className += " otherclass"

2. Vuex方式：可以有vue提供的集中状态，也可以使用vuex来管理状态，这些状态变量可以跨组件改变，可以用来动态添加/删除类。

   你可以看看我的这个answer，了解更多关于vuex的信息。