elementui el-link 点击之后变色

elementui中的el-link组件是一个带有文本链接和样式的元素。要实现点击之后变色的效果，可以使用elementui提供的内置样式和事件。

首先，给el-link组件增加一个需要变色的class，可以设置不同的样式来表示链接的变化状态。例如，可以在样式中定义一个新的class，比如.highlight，用来表示链接被点击后的高亮状态。

在模板中，可以将el-link的class属性设置为同时包含原始样式和.highlight类名，使用条件判断来切换是否添加.highlight类名。

进一步，使用elementui提供的@click事件来监听链接的点击，当链接被点击时触发事件回调。在回调函数中，可以根据当前是否已经添加了.highlight类名，来动态切换其存在与否。可以通过Vue的class绑定语法来实现这一切换。

以下代码展示了一个实现el-link点击后变色的示例：

<template>
  <div>
    <el-link
      :class="['custom-link', isHighlighted ? 'highlight' : '']"
      @click="handleLinkClick"
    >
      点击我
    </el-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false // 初始化高亮状态，默认为false
    };
  },
  methods: {
    handleLinkClick() {
      this.isHighlighted = !this.isHighlighted; // 切换高亮状态
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow; // 以黄色背景作为高亮样式
}
</style>

在上述示例中，使用了一个自定义的class 'custom-link'，这样可以在样式中自定义el-link的外观。在点击事件的回调函数中，通过切换isHighlighted属性的值，来动态添加或删除.highlight类名，从而实现点击后变色的效果。

需要注意的是，为了使样式生效，可能需要根据所在的环境和项目设置，适当调整选择器前缀或样式的优先级。