vue3 el-button点击高亮显示再次点击变暗

你可以借助 Vue3 的指令来实现这个效果。具体实现步骤如下：

1. 创建一个自定义指令 v-click-highlight，用于设置点击高亮效果。

// v-click-highlight.js
const clickHighlight = {
  mounted(el) {
    el.addEventListener('click', () => {
      el.style.backgroundColor = '#f2f2f2';
      setTimeout(() => {
        el.style.backgroundColor = '';
      }, 100);
    });
  },
};

export default clickHighlight;

2. 在组件中使用该指令，并为 el-button 组件添加 v-click-highlight 指令。

<template>
  <div>
    <el-button v-click-highlight>点击我</el-button>
  </div>
</template>

<script>
import clickHighlight from './v-click-highlight';

export default {
  directives: {
    clickHighlight,
  },
};
</script>

这样，当你点击按钮时，背景会短暂地变成灰色，然后恢复原来的颜色。这就是点击高亮的效果，再次点击按钮时，背景色会立即变回原来的颜色，实现了点击变暗的效果。