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>

现在，我希望当我点击 复选框 来设置数据 ＆＃34; isSelected＆＃34; < / strong> false，我可以给组件类 ＆＃34; checkboxcont-selected-last＆＃34; ，当我点击其他 复选框时 组件，可以删除类名 ＆＃34; checkboxcont-selected-last＆＃34; ，如何收听点击事件完成它？我尝试使用本机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 添加了类，因为我调度了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 data变量添加动态类。

我发现你已经在使用它了：

<my-button newText='xyz'></my-button>

所以这里这个div只有一个类：如果<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">为false，则为checkboxcont;如果isSelected为真，则为checkboxcont and checkboxcont-selected两个类。

编辑：

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

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

isSelected
Vuex方式：您可以使用vue提供的集中状态或使用vuex来管理状态，这些状态变量可以跨组件进行更改，并可用于添加/删除动态上课。

您可以查看我的answer了解有关vuex的更多信息。

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

1 个答案:

编辑：