vue3通过组合键实现换行操作的示例详解
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
需求背景
有一个聊天室功能,采用输入框的形式,输入完毕使用Enter,可以直接进行发送。使用一些组合键 比如 command+Enter / shift+Enter / alt + Enter ... 可以实现换行操作。但现实的情况是,原生 Enter 天然支持换行,但是我们需要阻止掉。但是组合键又需要自己去实现换行
效果图
原生使用Enter 换行
实现自定义组合键换行效果图
实现过程分析
- 根据需求定义组合键 Map
- 换行是根据光标位置进行换行,所以首先要获取到光标的位置
- 根据光标的位置,拆分成两段文本
- 合并两端文本为带有换行符的新文本
- 重新设置光标位置
代码实现
template模版
1 2 3 4 5 6 7 8 9 | < el-input ref = "editorRef" v-model = "valueHtml" type = "textarea" :rows = "4" placeholder = "请输入内容" @ keydown = "handleKeyDown" > </ el-input > |
js逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import { ref, nextTick } from 'vue' const currentEvent = ref() const valueHtml = ref( '' ) const editorRef = ref() const handleKeyDown = ($event: Event) => { const event = $event as KeyboardEvent currentEvent.value = event.target as HTMLInputElement // 定义组合键 Map const shortCutKeys: (keyof KeyboardEvent)[] = [ 'metaKey' , 'altKey' , 'ctrlKey' , 'shiftKey' ] const isEnterKey = event.key === 'Enter' const isShortcutKeys = shortCutKeys.some((item) => event[item]) if (isEnterKey && isShortcutKeys) { // 获取光标位置 const cursorPosition = currentEvent.value.selectionStart // 拆分成两段文本 const textBeforeCursor = valueHtml.value.slice(0, cursorPosition) const textAfterCursor = valueHtml.value.slice(cursorPosition) // 合并为带有换行符的新文本 const newText = textBeforeCursor + '\n' + textAfterCursor // 更新输入框的值 valueHtml.value = newText // 文本编辑器的高度发生变化后 nextTick(() => { // 高度变化 自动滚动到底部 const editor = editorRef.value.textarea editorRef.value.textarea.scrollTop = editor.scrollHeight // 设置光标位置为: start 和 end 相同,光标会移动到换行符后面的新行首 currentEvent.value.setSelectionRange(cursorPosition + 1, cursorPosition + 1) }) } else if (event.key === 'Enter' ) { // 阻止掉 Enter 的默认换行行为 event.preventDefault() // do yourself things for example send } } |
细节优化
组合键实现了换行,但是按下Enter 也会触发换行,要阻止掉他的默认行为
文本内容换行后,高度有限,需要自动滚动到最下面,保证内容始终可见
1 2 | const editor = editorRef.value.textarea editorRef.value.textarea.scrollTop = editor.scrollHeight |
到此这篇关于vue3通过组合键实现换行操作的示例详解的文章就介绍到这了,更多相关vue3换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue中transition单个节点过渡与transition-group列表过渡全过程
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下2018-10-10
最新评论