Vue自定义快捷键做粘贴

静态:

export default {data() {return {customContent: '这里是你想要粘贴的自定义内容' // 自定义内容};},mounted() {window.addEventListener('keydown', this.handleKeyDown);},beforeDestroy() {window.removeEventListener('keydown', this.handleKeyDown);},methods: {handleKeyDown(event) {// 检查是否按下了Control和G键if (event.ctrlKey && event.key === 'g') { // 使用event.key来检测键名// 找到当前获得焦点的输入框const focusedElement = document.activeElement;// 检查这个元素是否是输入框if (focusedElement && focusedElement.tagName === 'INPUT' && focusedElement.type === 'text') {// 获取输入框的当前值const currentValue = focusedElement.value;// 拼接自定义内容到当前值后面focusedElement.value = currentValue + this.customContent;// 触发输入事件,以便Vue更新数据const inputEvent = new Event('input', { bubbles: true });focusedElement.dispatchEvent(inputEvent);// 阻止默认行为,但允许其他默认行为发生event.preventDefault();}}}}
}

动态:

export default {data() {return {shortcuts: [], // 存储从接口获取的快捷键数据customContents: {"Alt": {"1": "test","B": "qwerewqrewqrqwe1234","W": "123"},"Ctrl": {"0": "samsung","B": "text123","I": "123321123qwer","M": "09876543212345"}}};},mounted() {// 绑定全局键盘事件document.addEventListener("keydown", this.handleKeyDown);},beforeDestroy () {document.removeEventListener(this.handleKeyDown)},methods: {handleKeyDown (event) {// 组合键检测const isAlt = event.altKey;const isCtrl = event.ctrlKey;const key = event.key.toUpperCase();// 根据组合键和按键内容查找let value = null;if (isAlt && this.hotKeyContents.Alt[key]) {value = this.hotKeyContents.Alt[key];event.preventDefault();} else if (isCtrl && this.hotKeyContents.Ctrl[key]) {value = this.hotKeyContents.Ctrl[key];event.preventDefault();}if (value !== undefined && value !== null && value !== '') {this.pasteCustomContent(value)}},pasteCustomContent (content) {// 获取当前获得焦点的元素const focusedElement = document.activeElement;// 检查这个元素是否是输入框if (focusedElement && focusedElement.tagName === 'INPUT' && focusedElement.type === 'text') {const startPos = focusedElement.selectionStart;const endPos = focusedElement.selectionEnd;// 保存滚动位置const scrollTop = focusedElement.scrollTop;// 将自定义内容插入到光标位置focusedElement.value = `${focusedElement.value.substring(0, startPos)}${content}${focusedElement.value.substring(endPos)}`;// 恢复滚动位置focusedElement.scrollTop = scrollTop;// 将光标移动到插入内容之后focusedElement.selectionStart = startPos + content.length;focusedElement.selectionEnd = startPos + content.length;// 触发输入事件,以便Vue更新数据const inputEvent = new Event('input', { bubbles: true });focusedElement.dispatchEvent(inputEvent);}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63960.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言篇】C 语言总复习(下):点亮编程思维,穿越代码的浩瀚星河

我的个人主页 我的专栏:C语言,希望能帮助到大家!!!点赞❤ 收藏❤ 在C语言的世界里,结构体和联合体以及文件操作都是非常重要且实用的知识板块,掌握它们能帮助我们更高效地组织数据以及与外部文…

CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析 CNCF云原生生态版图-项目和产品综合分析整体统计分析中国研发人员贡献项目和产品其中,纳入 CNCF 管理的开源项目 链接 CNCF云原生生态版图-项目和产品综合分析 整体统计分析 在对云原生技术选型时,优先选择经过 …

【vue2】文本自动省略组件,支持单行和多行省略,超出显示tooltip

代码见文末 vue3实现 最开始就用的vue3实现,如下 Vue3实现方式 vue2开发和使用文档 组件功能 TooltipText 是一个文字展示组件,具有以下功能: 文本显示:支持单行和多行文本显示。自动判断溢出:判断文本是否溢出…

MetaGPT源码 (ContextMixin 类)

目录 理解 ContextMixin什么是 ContextMixin?主要组件实现细节 测试 ContextMixin示例:ModelX1. 配置优先级2. 多继承3. 多继承重写4. 配置优先级 在本文中,我们将探索 ContextMixin 类,它在多重继承场景中的集成及其在 Python 配…

VScode、Windsurf、Cursor 中 R 语言相关快捷键设置

前言 在生物信息学数据分析中,R语言是一个不可或缺的工具。为了提高R语言编程效率,合理设置快捷键显得尤为重要。本文介绍在VSCode Windsurf Cursor 中一些实用的R语言快捷键设置,让非 Rstudio 的 IDE 用起来得心应手😑 操作种…

分布式任务调度平台xxl-job源码学习

XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线,开箱即用。 官网:https://www.xuxueli.com/xxl-job/ github:https://github.com/xuxueli/xxl-…

Macbookpro M1 IDEA中安装mysql

一:安装与连接数据库 1. 首先在mysql中创建一个初始数据库:idea_db,如示: 2.打开IDEA,如果最右侧没有database窗口,则在插件那里下载“Database navigator”,稍后重启一下即可; 点击最右侧Database---->…

leetcode 3264. K 次乘运算后的最终数组 I 简单

给你一个整数数组 nums ,一个整数 k 和一个整数 multiplier 。 你需要对 nums 执行 k 次操作,每次操作中: 找到 nums 中的 最小 值 x ,如果存在多个最小值,选择最 前面 的一个。将 x 替换为 x * multiplier 。 请你…

根据契约进行分析--录像店案例研究01

Richard Mitchell 著,zhen_lei 译 本文包括录像店案例研究的一些片段,用来说明根据契约进行分析的原理。本文假定读者已经从其它渠道学习了一些关于根据契约进行分析的方法。 完整的一套模型可以写成一本书。这些选择的片段用来说明开发的某些方面&…

Linux内核结构及源码概述

参考:深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) Linux 是一个庞大、高效而复杂的操作系统,虽然它的开发起始于 Linus Torvalds 一个人,但随着时间的推移,越来越多的人加入了 Linux 的开发和对它的不断完善…

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如: 效果: 代码: TMPtext1.text "\u3000\u3000" "选择动作类型:";

单片机:实现控制LED灯亮灭(附带源码)

使用单片机控制LED灯的亮灭是一个非常基础的嵌入式应用项目,适合初学者学习如何操作GPIO(通用输入输出)端口以及如何控制外设。通过该项目,您可以学习如何通过按键输入、定时器控制或其他触发条件来控制LED灯的开关状态。 1. 项目…

jQuery理论

jQuery定义 jQuery是一个快速、简洁的JavaScript库,它能够简化HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是通过尽可能少的代码实现更多的功能,并且提供一种优雅的方式来处理HTML文档、处理事件、创建动画效果以及实现Ajax交互。. …

容器内部时间和Node时间不同步问题

之前在《 Docker及Kubernetes使用过程中出现的问题(FAQ)》中的“FAQ30 容器内部时间和Node时间不同”分享过容器内部和容器服务器之间时间不一致的问题;这通常会导致各种问题,比如日志记录、定时任务等。 问题原因:问…

组合模式(Composite Pattern):树形结构的优雅处理方案

目录 1. 什么是组合模式2. 组合模式的结构3. UML类图4. 代码实现5. 常见应用场景6. 优缺点分析7. 最佳实践建议 1. 什么是组合模式 组合模式(Composite Pattern)是一种结构型设计模式,它允许你将对象组合成树形结构来表现"整体-部分&…

AI开源南京分享会回顾录

AI 开源南京分享会,已于2024年11月30日下午在国浩律师(南京)事务所5楼会议厅成功举办。此次活动由 KCC南京、PowerData、RISC-Verse 联合主办,国浩律师(南京)事务所协办。 活动以“开源视角的 AI 对话”为主…

OpenCV 图像变换与处理实战

OpenCV快速通关 第一章:OpenCV 简介与环境搭建 第二章:OpenCV 图像基本操作 第三章:OpenCV 图像变换与处理实战 OpenCV 图像变换与处理实战 OpenCV快速通关OpenCV 图像变换与处理实战一、OpenCV 基础与图像处理概览二、图像变换理论精析三、…

Ubuntu22.04安装docker desktop遇到的bug

1. 确认已启用 KVM 虚拟化 如果加载了模块,输出应该如下图。说明 Intel CPU 的 KVM 模块已开启。 否则在VMware开启宿主机虚拟化功能: 2. 下一步操作: Ubuntu | Docker Docs 3. 启动Docker桌面后发现账户登陆不上去: Sign in | …

【深度学习入门】深度学习介绍

1.1 深度学习介绍 学习目标 目标 知道深度学习与机器学习的区别了解神经网络的结构组成知道深度学习效果特点 应用 无 区别 特征提取方面 机器学习的特征工程步骤是要靠手动完成的,而且需要大量领域专业知识深度学习通常由多个层组成,它们通常将更简…

实现按键按下(低电平)检测到下降沿

按照流程进行编程 步骤1: 初始化函数 包括时基工作参数配置 输入通道配置 更新中断使能 使能捕获、捕获中断及计数器 HAL_TIM_IC_Init(&ic_handle) //时基参数配置 HAL_TIM_IC_ConfigChannel(&ic_handle,&ic_config,TIM_CHANNEL_2) //输…