elementUI点击el-card选中变色，且点击别的空白处不变色

在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，从而取消选中状态。在组件销毁前，我们需要移除这个监听器，以防止潜在的内存泄漏。