vue3通过组合键实现换行操作的示例详解

 更新时间:2024年03月01日 11:18:42   作者:赵小川  
这篇文章主要为大家详细介绍了vue3如何通过组合键,例如command+Enter、shift+Enter、alt + Enter,实现换行操作,感兴趣的可以了解下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

需求背景

有一个聊天室功能,采用输入框的形式,输入完毕使用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
3
4
else if (event.key === 'Enter') {
    // 阻止掉 Enter 的默认换行行为
    event.preventDefault()
}

文本内容换行后,高度有限,需要自动滚动到最下面,保证内容始终可见

1
2
const editor = editorRef.value.textarea
editorRef.value.textarea.scrollTop = editor.scrollHeight

到此这篇关于vue3通过组合键实现换行操作的示例详解的文章就介绍到这了,更多相关vue3换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7326807800906268711

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue ssr服务端渲染(小白解惑)

    vue ssr服务端渲染(小白解惑)

    这篇文章主要介绍了vue ssr服务端渲染(小白解惑),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue中el-message的封装使用

    vue中el-message的封装使用

    本文主要介绍了vue中el-message的封装使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 详解关于vue-area-linkage走过的坑

    详解关于vue-area-linkage走过的坑

    这篇文章主要介绍了详解关于vue-area-linkage走过的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 从零实现一个vue文件解析器

    从零实现一个vue文件解析器

    本文就讨论下怎么实现一个处理.vue文件的loader,以及用loader处理完.vue文件怎么把内容渲染在浏览器上并实现简单的响应式,对vue文件解析器相关知识感兴趣的朋友一起看看吧
    2022-06-06
  • 解决vue页面渲染但dom没渲染的操作

    解决vue页面渲染但dom没渲染的操作

    这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue中transition单个节点过渡与transition-group列表过渡全过程

    Vue中transition单个节点过渡与transition-group列表过渡全过程

    这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue+elementUI中el-radio设置默认值方式

    vue+elementUI中el-radio设置默认值方式

    这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue CLI3搭建的项目中路径相关问题的解决

    Vue CLI3搭建的项目中路径相关问题的解决

    这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    详解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
  • vue生命周期实例小结

    vue生命周期实例小结

    这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下
    2018-08-08

最新评论