如何从带有嵌入式div的按钮中获取类

Question

我正在将元素从jQuery转换为Vue 3 JS。

我正在创建一个名为"CardID"上面会有人名的首字母

在某些情况下是可选的，在其他情况下则不是。所以，当我使用组件来确定它是否可选时，我传递了这个类。

如果用户单击它，并且它的类为"is-selectable"，则会在它周围显示一个蓝色边框。再点击一次，它就消失了。

在Vue3中，我相信我可以在元素上获得className的唯一方法是通过使用event.target.

如果我点击按钮的灰色区域，效果很好。但是如果我点击白色的圆圈或字母，它就不起作用了。

任何帮助将不胜感激。我知道在普通JavaScript中也会发生同样的事情。

使用组件…

<CardID class="is-selectable" symbolText="K" />

代码:

<template>
<button class="card" :class="{active: isActive}" @click="checkClass">
<div class="card__circle">
<div class="card__symbol">{{ symbolText }}</div>
</div>
</button>
</template>
<script>
export default {
name: "CardID",
data: function () {
return {
isActive: false
}
},
props: {
symbolText: String,
},
methods: {
checkClass(evt) {
if(evt.target.className.includes("is-selectable")) {
this.isActive = !this.isActive;
}
}
}
}
</script>
<style scoped>
.active {
border: 2px solid #1971D4;
box-shadow: inset 0px 0px 0px 4px #fff;
}
.card {
position: relative;
width: 160px;
height: 115px;
border-radius: 8px;
border: 2px solid transparent;
background-color: #E7E7E8;
}
.card__circle {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
transform: translate(-50%, -50%);
}
.card__symbol {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
font-size: 2.25rem;
color: #1d242b;
transform: translate(-50%, -50%);
}

Answer 1

自定义组件可以有自定义道具，所以你应该在你的CardID组件中创建一个selectable道具，并使用它来检查行为。比如:

<template>
<button class="card" :class="{active: isActive}" @click="checkClass">
<div class="card__circle">
<div class="card__symbol">{{ symbolText }}</div>
</div>
</button>
</template>
<script>
export default {
name: "CardID",
data: function () {
return {
isActive: false
}
},
props: {
selectable: Boolean,
symbolText: String,
},
methods: {
checkClass(evt) {
if(this.selectable) {
this.isActive = !this.isActive;
}
}
}
}
</script>

并且像这样使用你的组件:

// non selectable card
<CardID :selectable="false" symbolText="K" />
// selectable card
<CardID :selectable="true" symbolText="K" />

PS:还请注意，您可以设置一个default值为您的道具，这通常是有用的布尔属性

Answer 2

尝试使用this.$el.className代替evt.target.className:

<template>
<button class="card" :class="{active: isActive}" @click="checkClass">
<div class="card__circle">
<div class="card__symbol">{{ symbolText }}</div>
</div>
</button>
</template>
<script>
export default {
name: "CardID",
data: function () {
return {
isActive: false
}
},
props: {
symbolText: String,
},
methods: {
checkClass(evt) {
if(this.$el.className.includes("is-selectable")) {
this.isActive = !this.isActive;
}
}
}
}
</script>