el-date-picker设置按下回车键触发动作
时间: 2023-07-24 08:15:30 浏览: 438
要设置 el-date-picker 按下回车键触发动作,可以使用 input 事件和 @keyup.enter 事件。具体做法如下:
1. 给 el-date-picker 组件绑定 input 事件,监听用户的输入。
```html
<el-date-picker v-model="date" @input="handleInput"></el-date-picker>
```
2. 在 handleInput 方法中监听回车键事件,如果按下了回车键,就执行需要的操作。
```javascript
methods: {
handleInput(event) {
if (event.keyCode === 13) { // 13 是回车键的键码
// 执行需要的操作
}
}
}
```
3. 可以使用 @keyup.enter 事件直接绑定回车键的操作,这样就不需要在 handleInput 方法中判断按下的是不是回车键。
```html
<el-date-picker v-model="date" @keyup.enter="handleEnter"></el-date-picker>
```
```javascript
methods: {
handleEnter() {
// 执行需要的操作
}
}
```
注意:el-date-picker 组件的 input 事件返回的是当前选择的日期值,而 @keyup.enter 事件返回的是事件对象。所以在 handleEnter 方法中需要使用 this.$refs.datePicker.currentValue 获取当前选择的日期值。
阅读全文