vue ctrl+enter 实现换行

模仿微信enter发送 ctrl+enter 换行

template 核心是@keyup.enter.exact 和 @keyup.ctrl.enter

<textarea
	v-if="message.contentType === 1"
	@keyup.enter.exact="sendMessage"
	@keyup.ctrl.enter="lineFeed()"
	class="text scroll"
	cols="30"
	rows="10"
	maxlength="1000"
	autofocus
	required
	v-model="textContent"
></textarea>

js

export default {
	data () {
		return {
			textContent: ''
		}
	},
	methods: {
		 // 发送消息
		 sendMessage () {
		 // 业务逻辑省略
		},
		 // 换行
		lineFeed () {
			console.log('换行')
			console.log(this.textContent)
			this.textContent = this.textContent + '\n'
		}
	}
}

遇到的坑

• textarea 必须获取焦点快捷键才会生效
• enter 需要加exact 不然按ctrl+enter 也会触发enter