el-input 按键事件

以下是el-input按键事件的两种写法：
1. 使用.native原生事件修饰符监听键盘事件

<el-input @keyup.enter.native="handleEnter"></el-input>

2. 使用按键值作为修饰符监听键盘事件

<el-input @keyup.13="handleEnter"></el-input>

相关问题

vue中el-input绑定键盘按键

在Vue中，可以使用`@keydown`指令来绑定键盘按键。

`<el-input>`是Element UI库中的一个组件，可以通过`placeholder`属性设置文本框的提示内容，`v-model`指令用于双向数据绑定。

要绑定键盘按键，可以使用`@keydown`指令，它可以监听键盘事件。在`<el-input>`上添加`@keydown`事件处理函数即可。

首先，在Vue实例的`data`中添加一个属性，用于保存输入框的值。例如：

data() {
  return {
    inputText: ''
  };
}

然后，在`<el-input>`上添加`v-model`指令，将输入框的值绑定到`inputText`属性：

<el-input v-model="inputText" placeholder="请输入内容"></el-input>

最后，在`<el-input>`上添加`@keydown`事件，用于监听键盘按键：

<el-input v-model="inputText" placeholder="请输入内容" @keydown="handleKeydown"></el-input>

在Vue实例中，定义`handleKeydown`方法来处理键盘按键事件：

methods: {
  handleKeydown(event) {
    console.log('键盘按下：', event.keyCode);
  }
}

`event.keyCode`返回按下的键盘按键的键码值。可以根据需要在`handleKeydown`方法中编写逻辑，来处理不同的按键事件。

vue中el-input使用el-tag

可以使用vue的slot来实现这个功能。具体步骤如下：

1. 在el-input组件中添加一个slot，用于显示el-tag组件。

<el-input v-model="inputValue">
  <template slot="suffix">
    <el-tag>{{ tagValue }}</el-tag>
  </template>
</el-input>

2. 在data中定义inputValue和tagValue两个变量，并在methods中添加一个addTag方法，用于将inputValue的值添加到tagValue中。

data() {
  return {
    inputValue: '',
    tagValue: ''
  }
},
methods: {
  addTag() {
    if (this.inputValue) {
      this.tagValue = this.inputValue;
      this.inputValue = '';
    }
  }
}

3. 在el-input组件中添加一个按键事件，当用户按下回车键时，调用addTag方法。

<el-input v-model="inputValue" @keyup.enter.native="addTag">
  <template slot="suffix">
    <el-tag>{{ tagValue }}</el-tag>
  </template>
</el-input>