如何在全局點擊事件中切換選定的類？

Question

我在 vue 中創建我的組件庫，並定義了我的組件復選框，代碼是這樣的：

<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” ，當我點擊其他復選框組件時，類名“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;
    }
}

請問我應該怎么做才能解決這個問題？

這是我使用較少的樣式代碼：

<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添加類，因為我調度了click事件，所以可以訪問它，而我只是無法訪問其他組件：

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 數據變量添加動態類。

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

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

所以這里這個 div 將只有一個類：如果isSelected為 false，則為checkboxcont ，如果isSelected為 true，則有兩個類： checkboxcont and checkboxcont-selected 。

編輯：

鑒於您想在另一個組件上向 DOM 添加一個類，我可以想到兩種方法：

1. 使用 Web API：如果您知道要使用Element.className添加類的元素的 id，則可以執行以下操作：

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

2. Vuex方式：你可以有一個vue提供的集中狀態或者使用vuex來管理狀態，這些狀態變量可以跨組件改變，可以用來動態添加/刪除類。

您可以查看我的這個答案以了解有關 vuex 的更多信息。