EL-input添加双击或者单击事件

#El-lement UI #

这个框架确实给我们带来了很多好处，最近一直忙于项目，没时间来写文章，最近有个问题困扰我很久，最终却很简单的解决了，记下来希望能帮助更多的人。

大家都知道el-input是无法直接添加click或者dblclick事件的，如果你写上大概率会有以下错误：

[Element Migrating][ElInput][Event]: click is removed

解释：

[Element Migrating][ElInput][Event]: click is removed 意思是在 Element UI 的 ElInput 组件中，移除了 click 事件。在最新的版本中，建议使用更加语义化的事件，例如 input、change 等。

这个迁移指南的目的是为了帮助开发者更好地适应 Element UI 的新版本，同时也是为了提高代码的可读性和可维护性。移除 click 事件是其中的一项改变，因为 click 事件并不是最适合用于输入框的事件。

在 Element UI 的新版本中，建议使用以下事件来代替 click 事件：

• input：当输入框的值发生变化时触发。
• change：当输入框的值发生变化并且失去焦点时触发。

这些事件更加语义化，能够更好地表达开发者的意图。同时，也可以让代码更加清晰易懂，便于维护。

重点：那么我们如何方便的添加一个双击或者单击事件呢？？

在我尝试了无数次后，发现复杂的问题往往解决起来并不困难，看你方法对不对了，

正所谓“众里寻他千百度，蓦然回首那人却在灯火阑珊处”。

如果你想监听双击或单击事件，你可以将 el-input 包装在一个自定义的组件中，并在该组件中实现这些事件的监听和处理。下面是一个示例代码：

html复制代码

<template>
  <div @dblclick="handleDoubleClick" @click="handleClick">
    <el-input v-model="inputValue">el-input>
  div>
template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleDoubleClick() {
      console.log('Double Click');
      // 双击事件处理逻辑
    },
    handleClick() {
      console.log('Single Click');
      // 单击事件处理逻辑
    }
  }
};
script>

在上面的示例中，我们将 el-input 包装在一个 div 元素中，并在 div 上监听了 dblclick 和 click 事件。然后，我们可以在对应的方法中实现双击和单击事件的处理逻辑。

====================================

简码笔记，让你的代码更加简约精炼。

转载请注明出处。