vue2设置el-button指令 设置快捷按钮

在 Vue.js 2 中，如果你想要自定义`<el-button>`组件的行为并为其添加快捷键支持，可以使用Vue的指令系统。首先，你需要创建一个自定义指令，然后将其绑定到`<el-button>`元素上。

1. 定义自定义指令：
在你的Vue组件的script部分，你可以创建一个名为`v-keybind`的自定义指令，例如：

export default {
  directives: {
    vKeybind: {
      bind(el, binding, vnode) {
        const handler = (event) => {
          if (event.key === binding.value) {
            // 执行你的快捷操作逻辑
            vnode.context.$emit('your-event', event);
          }
        };
        
        el.addEventListener('keydown', handler);
        vnode.context.$on('destroyed', () => {
          el.removeEventListener('keydown', handler);
        });
      },
      unbind(el, binding, vnode) {}
    }
  }
}

2. 使用指令：
现在你可以在`<el-button>`标签上应用这个指令，并提供快捷键作为值，比如绑定`Enter`按键：

<template>
  <el-button @click="onClick" v-keybind.enter="doSomething">
    我是一个带快捷键的按钮
  </el-button>
</template>

<script>
methods: {
  onClick() {
    // 普通点击事件
  },
  doSomething(event) {
    // 快捷键触发的操作
  }
}
</script>

当用户按下`Enter`键时，`doSomething`方法会被调用。