vue3 中组合键 command+Enter / shift+Enter / alt + Enter 实现换行,详细实现

这篇具有很好参考价值的文章主要介绍了vue3 中组合键 command+Enter / shift+Enter / alt + Enter 实现换行,详细实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3 中组合键实现换行

需求背景

  • 有一个聊天室功能,采用输入框的形式,输入完毕使用Enter可以直接进行发送。使用一些组合键 比如 command+Enter / shift+Enter / alt + Enter … 可以实现换行操作。但现实的情况是,原生 Enter 天然支持换行,但是我们需要阻止掉。但是组合键又需要自己去实现换行

效果图

  • 原生使用Enter 换行

vue3 中组合键 command+Enter / shift+Enter / alt + Enter 实现换行,详细实现,vue.js,javascript,前端

  • 实现自定义组合键换行效果图

vue3 中组合键 command+Enter / shift+Enter / alt + Enter 实现换行,详细实现,vue.js,javascript,前端

实现过程分析

  1. 根据需求定义组合键 Map
  2. 换行是根据光标位置进行换行,所以首先要获取到光标的位置
  3. 根据光标的位置,拆分成两段文本
  4. 合并两端文本为带有换行符的新文本
  5. 重新设置光标位置

代码实现

  • template模版
<el-input
        ref="editorRef"
        v-model="valueHtml"
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        @keydown="handleKeyDown"
      >
      </el-input>

js逻辑文章来源地址https://www.toymoban.com/news/detail-821712.html

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
  }
}

细节优化

  1. 组合键实现了换行,但是按下Enter 也会触发换行,要阻止掉他的默认行为
else if (event.key === 'Enter') {
    // 阻止掉 Enter 的默认换行行为
    event.preventDefault()
}
  1. 文本内容换行后,高度有限,需要自动滚动到最下面,保证内容始终可见
const editor = editorRef.value.textarea
editorRef.value.textarea.scrollTop = editor.scrollHeight

到了这里,关于vue3 中组合键 command+Enter / shift+Enter / alt + Enter 实现换行,详细实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 三个方法解决pycharm中 ,alt +enter自动导入包的快捷键失效的问题

    目录 1. 检查IDE设置:查看IDE的设置,确保自动导入包的功能是启用的 2. filesettingskeymap 里没有找到 alt + enter 的快捷键 3. 按照网上教程说的如下选项勾上,也没用 4. 在右侧的General设置界面中,找到并点击Auto Import 5. Add unambiguous imports on the fly:IDE将在你编写代码时自动添加明

    2024年01月21日
    浏览(43)
  • Qt获取键盘按键ctrl和alt以及shift按键按下和松开

    .h文件中定义 这里主要为了获取按键ctrl和alt以及shift按键按下和松开来达到对QTableWidget中的内容进行多选 但是这引入了一个问题,那就是当前界面想要使用按键捕获,就需要在切换到该界面时调用: grabKeyboard() 那么在这个例子中就是调用 my_record-grabKeyboard(); 到达获取键盘的

    2024年02月12日
    浏览(45)
  • vscode怎么对选定的代码格式化?ctrl+k,ctrl+f(格式化代码)shift+alt+f

    先选中代码: 然后按CTRL + K 再按CTRL+F 也可以先选择要格式化的代码块,ctrl+shift+p,搜索format,然后第二个就是: 20230816 在本文中,我们将深入探讨如何在Visual Studio Code (VSCode)中对选定的代码进行格式化。代码格式化是提高代码可读性和维护性的关键步骤,也是良好编程实践

    2024年02月15日
    浏览(49)
  • macos中回退键是Command+shift+z,我该如何改成Command+y?

    在使用 macOS 操作系统时,回退键的默认快捷键是 Command+Shift+Z。然而,对于一些用户来说,这种组合键可能不太方便,因此他们希望将其改为其他组合键,例如 Command+Y。如果你也想更改回退键的快捷键,请按照以下步骤进行操作。 操作如下,打开系统设置-键盘   m a c 技 巧

    2024年02月11日
    浏览(39)
  • vue3组合式笔记

    dfdf {{count}} {{state.count}} {{computedValue}} // // 校验 submit 事件 // submit: ({ email, password }) = { // if (email password) { // return true // } else { // console.warn(‘Invalid submit event payload!’) // return false // } // } // }) // function submitForm(email, password) { // emit(‘submit’, { email, password }) // } // input // type=“

    2024年02月06日
    浏览(47)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(65)
  • vue3中如何使用el-tooltip中的插槽达到换行效果

    el-tooltip的content属性中的内容可以使用插槽来替换 话不多说,直接上代码 最后放上效果对比图,如果觉得有帮到你,可以给我一个赞吗😜 没换行前的效果 换行后的效果

    2024年02月10日
    浏览(54)
  • Vue3组合式API

    目录 composition API vs options API 体验 composition API setup 函数 reactive 函数 ref 函数 script setup 语法 计算属性 computed 函数 监听器 watch 函数 生命周期 模板中 ref 的使用 组件通讯 - 父传子 组件通讯 - 子传父 依赖注入 - provide 和 inject 保持响应式 - toRefs 函数 vue2 采用的就是 options API (

    2024年02月07日
    浏览(66)
  • vue3组合式API介绍

    根据官方的说法,vue3.0的变化包括性能上的改进、更小的 bundle 体积、对 TypeScript 更好的支持、用于处理大规模用例的全新 API,全新的api指的就是本文主要要说的组合式api。 在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式: M

    2023年04月22日
    浏览(63)
  • 快速入门vue3组合式API

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 使用create-vue创建项目 熟悉项目目录和关键文件  组合式API  setup选项 setup选项的写法和执行时机 script setup 语法糖 reactive和ref函数 reactive() ref() computed watch 侦听单个数据

    2024年02月12日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包