在Element UI中，要实现点击el-card组件选中并变色，可以通过监听el-card的点击事件，并使用Vue的class绑定来动态切换颜色。以下是一个简单的示例：
<template>
<el-card
:class="{ 'is-selected': isSelected }"
@click="selectCard"
>
<!-- Card content -->
</el-card>
</template>
<script>
export default {
data() {
return {
isSelected: false
};
},
methods: {
selectCard() {
this.isSelected = !this.isSelected;
}
}
};
</script>
<style>
.is-selected {
background-color: #409EFF; /* 选中时的颜色 */
}
</style>在这个例子中，当点击el-card组件时，selectCard方法会被调用，isSelected数据属性会被切换。is-selected是一个动态类名，当isSelected为true时，会应用对应的背景颜色样式。
点击其他空白处不变色的需求，可以通过监听全局点击事件来实现。当el-card外的其他区域被点击时，将isSelected重置为false。
created() {
// 在组件创建时添加点击事件监听
document.addEventListener('click', this.handleOutsideClick);
},
beforeDestroy() {
// 在组件销毁前移除点击事件监听
document.removeEventListener('click', this.handleOutsideClick);
},
methods: {
selectCard() {
this.isSelected = !this.isSelected;
},
handleOutsideClick(event) {
// 检查点击事件是否发生在el-card之外
if (!this.$el.contains(event.target)) {
this.isSelected = false;
}
}
}在这个例子中，当组件被创建时，我们为document添加了一个点击事件监听器。当点击事件发生时，handleOutsideClick方法会被调用。如果点击事件的target不在当前组件的元素内，我们就将isSelected设置为false，从而取消选中状态。在组件销毁前，我们需要移除这个监听器，以防止潜在的内存泄漏。