el-input如何输入alt+enter换行
时间: 2023-11-07 10:07:27 浏览: 189
vue中el-input绑定键盘按键(按键修饰符)
el-input默认不支持alt enter换行,但你可以通过以下几种方法实现:
1. 使用textarea代替el-input,textarea本身就支持alt enter换行:
```html
<template>
<textarea></textarea>
</template>
```
2. 使用v-model绑定el-input的value,并监听keyup事件,在输入alt enter时手动添加换行符:
```html
<template>
<el-input v-model="value" @keyup.alt.enter="addNewLine"></el-input>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
addNewLine(event) {
const { value, selectionStart, selectionEnd } = event.target
this.value = `${value.substring(0, selectionStart)}\n${value.substring(selectionEnd)}`
this.$nextTick(() => {
event.target.selectionStart = event.target.selectionEnd = selectionStart + 1
})
}
}
}
</script>
```
3. 使用contenteditable代替el-input,contenteditable是一个原生的可以编辑的元素,支持alt enter换行:
```html
<template>
<div contenteditable></div>
</template>
```
阅读全文