dedecms网站搬家/软件培训班学费多少
项目反馈输入框内容比较多时候,让鼠标光标在最后一个位置,心想什么奇葩需求,后面试了一下,是有点影响体验,于是就有了下面的效果,我目前的项目都是若依的架子,用的是vue2版本。vue3的朋友想要使用,自行调节
效果图如下:
使用方法:
- 前提是指令被注册,代码不显示注册内容
<el-input v-focus2end v-model="dialog.form.actionSign" placeholder="请输入" clearable />
v-focus2end 指令
- 还能继续优化,我就不想在操作了
/*** Copyright ©* # v-focus2end* @author: zw* @date: 2023-07-17*/export default {inserted(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.addEventListener('focus', focusEventListener.bind(input), false)input.addEventListener('blur', blurEventListener.bind(input), false)el.__focusEventListener = focusEventListenerel.__blurEventListener = blurEventListener},unbind(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.removeEventListener('focus', el.__focusEventListener, false)input.removeEventListener('blur', el.__blurEventListener, false)},
}function focusEventListener(e) {e.preventDefault()setTimeout(() => {const inputLength = this.value.lengththis.setSelectionRange(inputLength, inputLength)smoothMove.call(this)}, 300)
}function blurEventListener() {this.removeEventListener('focus', focusEventListener, false)
}function smoothMove() {const scrollMax = this.scrollWidth - this.clientWidthconst duration = 300const startTime = performance.now()function smoothScroll(timestamp) {const elapsedTime = timestamp - startTimeconst progress = Math.min(elapsedTime / duration, 1)const scrollPosition = progress * scrollMaxthis.scrollLeft = scrollPositionif (elapsedTime < duration) {requestAnimationFrame(smoothScroll.bind(this))}}requestAnimationFrame(smoothScroll.bind(this))
}
相关文章:

编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置
项目反馈输入框内容比较多时候,让鼠标光标在最后一个位置,心想什么奇葩需求,后面试了一下,是有点影响体验,于是就有了下面的效果,我目前的项目都是若依的架子,用的是vue2版本。vue3的朋友想要使…...

Virtualbox设置访问外网以及主机和虚拟机互通
参考链接 1、设置使虚拟机访问外网。选中虚拟机,右击选择“设置”。 2、在设置中选择“网络”,然后点击“网卡1”,选择“网络地址转换(NAT)”模式,点击“确定”。 4.此时你的虚拟机就可以访问外网了 5…...

请简述React是什么?React的主要特点有哪些?React中有哪些主要组件?
1、请简述React是什么? React是一个用于构建用户界面的JavaScript库,它由Facebook开发并开源。React的主要特点是其数据驱动和组件化的设计理念。它允许开发者将复杂的界面分解为简单的组件,并将这些组件以数据流的方式组合在一起࿰…...

DevOps最佳实践和工具在本地环境中的概述
引言 最近,我进行了一次网上搜索,以寻找DevOps的概述,尽管有大量的DevOps工具和实践,但我无法找到一个综合的概述。因此,我开始了对DevOps生态系统和最佳实践的梳理,以创建一个整体视图,方便后续研究实践 C…...

kafka和rabbitmq之间的区别以及适用场景
Kafka 和 RabbitMQ 都是流行的消息传递系统,用于实现分布式系统中的消息传递、事件处理和数据流。它们在设计和适用场景上有一些不同,下面详细介绍它们之间的区别和适用场景。 Kafka 特点和优势: 高吞吐量: Kafka 的设计目标是实…...

python——案例15:判断奇数还是偶数
案例15:判断奇数还是偶数numint(input(输入数值:))if(num%2)0: #通过if语句判断print("{0}是偶数".format(num))else: #通过else语句判断print("{0}是奇数".format(num))...

springboot汽车租赁后台java出租客户管理jsp源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 springboot汽车租赁后台 系统有1权限:管理…...

Linux学习之sed删除、追加、插入、更改、读写文件、下一行、打印、退出和seq命令
cat /etc/redhat-release看到操作系统是CentOS Linux release 7.6.1810,uname -r看到内核版本是3.10.0-957.el7.x86_64,sed --version可以看到sed版本是4.2.2。 echo a : 1 : good : g >> sed_daicpnrwq.txt echo b : 2 : well : w >> sed…...

JuiceFS 在多云存储架构中的应用 | 深势科技分享
2020 年末,谷歌旗下 DeepMind 研发的 AI 程序 AlphaFold2 在国际蛋白质结构预测竞赛上取得惊人的准确度,使得 “AI 预测蛋白质结构” 这一领域受到了空前的关注。今天我们邀请到同领域企业,深势科技为大家分享其搭建基础平台时的实践与思考。…...

什么是DNS的缓存?
DNS 缓存是一个临时的数据库,存储在计算机或网络设备(如路由器)上,用于保存最近的 DNS 查询结果。这种缓存机制可以加速后续的相同查询,因为设备可以直接从缓存中提取先前的查询结果,而不需要再次到外部的 …...

smtplib.SMTPHeloError: (500, b‘Error: bad syntax‘)
如果你编写邮件收发工具的时候,有可能会遇到这个问题。这里直接给出解决办法。 目录 1、检查系统版本 2、点击右侧的更改适配器选项...

/proc directory in linux
Its zero-length files are neither binary nor text, yet you can examine and display themUnder Linux, everything is managed as a file; even devices are accessed as files (in the /dev directory). Although you might think that “normal” files are either text …...

装饰器模式(C++)
定义 动态(组合)地给一个对象增加一些额外的职责。就增加功能而言,Decorator模式比生成子类(继承)更为灵活(消除重复代码&减少子类个数)。 一《设计模式》 GoF 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能…...

matlab使用教程(12)—随机数种子和随机数流
1.生成可重复的随机数 1.1指定种子 本示例显示如何通过首先指定种子来重复生成随机数数组。每次使用相同种子初始化生成器时,始终都可以获得相同的结果。首先,初始化随机数生成器,以使本示例中的结果具备可重复性。 rng( default ); 现在…...

【Java】JVM GC配置指南
1、JDK版本 以下所有优化全部基于JDK8版本,强烈建议低版本升级到JDK8,并尽可能使用update_191以后版本。 2、如何选择垃圾回收器 响应优先应用:面向C端对响应时间敏感的应用,堆内存8G以上建议选择G1,堆内存较小或低…...

11.Eclipse 注释模板的说明及设置
1.在eclipse中点击Window——>java——>Code Style——>CodeTemplates——>Comments 2.常用Variable 3. 我的注释模板 ①Files 文件 /** * Title: ${file_name}* Description: ${todo}* author Jeremy* date ${currentDate:date(yyyy-MM-dd hh:mm:ss)} */ ②Typ…...

Maven父子工程项目的配置
在Java的Maven多模块(父子工程)项目中,Maven插件的配置非常重要,因为它们可以帮助你进行项目构建、测试、打包等各种任务。以下是一个简单的父子工程Maven插件配置的示例: 假设你有如下的项目结构: paren…...

jumpserver命令记录膨胀问题
一.背景 jumpserver堡垒机针对只是接管ssh来说,正常操作Linux的指令记录应该不会太多,每天有个几千条都已经算很多了。所以默认jumpserver采用MySQL作为存储介质本身也没啥问题。但是我们使用jumpserver对【MySQL应用】进行了托管,导致查询SQ…...

ControlNet
2023.8.10 Adding Conditional Control to Text-to-Image Diffusion Models 对于 T2I 扩散模型添加 条件控制 相关联比较大的几篇论文: 0.Abstract 可以为预训练的扩散模型提供额外的输入条件控制。不需要很多计算资源。 即使在小数据集上,也具有鲁棒…...

竞赛项目 深度学习图像风格迁移 - opencv python
文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习图像风格迁移 - opencv python 该项目较为新颖,适合作为竞赛课题…...

Windows dos文件夹与文件怎么创建与删除
在Windows操作系统中,你可以使用命令行工具(命令提示符或PowerShell)来创建和删除文件夹和文件。以下是创建和删除文件夹和文件的基本方法: 创建文件夹: 使用mkdir命令来创建文件夹(目录)。 m…...

JVM总结2
1.基本概念 java代码执行 代码编译class:javac 源文件通过编译器产生字节码文件,字节码文件通过jvm的解释器编译成机器上的机器码 装载class:ClassLoader执行class: 解释执行编译执行 client compilerserver compiler 内存管理…...

servlet三大类HttpSevlet,HttpServletRequest,HttpServletResponse介绍
一、HttpServlet HttpServlet类是一个被继承的方法,可以看做一个专门用来响应http请求的类,这个类的所有方法都是为响应http请求服务的,要对一个某个路径谁知http响应时,需要写一个类来继承HttpServlet类,并重写里面的…...

【雕爷学编程】Arduino动手做(12)---霍尔模块之霍尔磁感应声光报警器(磁控开关,接220V)
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…...

认识 SQL
文章目录 1.简介2.组成3.工作原理4.五种子语言5.注释方式6.字符串表示方式参考文献 1.简介 SQL(Structured Query Language,结构化查询语言)是一种用于管理和操作关系型数据库的标准化查询语言。它是一种领域特定语言(DSL&#x…...

【剑指Offer 58】翻转单词顺序,Java解密。
LeetCode 剑指Offer 75道练习题 文章目录 剑指Offer:翻转单词顺序示例:限制:解题思路:剑指Offer:翻转单词顺序 【题目描述】 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变。为简单起见,标点符号和普通字母一样处理。例如输入字符串"I am a stu…...

微服务Ribbon-负载均衡原理
目录 一、LoadBalancerIntercepor 二、LoadBalancerClient 三、负载均衡策略IRule 四、总结 上一篇中,我们添加了LoadBalanced注解,即可实现负载均衡功能,这是什么原理呢? SpringCloud底层其实是利用了一个名为Ribbon的组件&…...

如何实现Vue的异步组件?如何在Vue中使用本地存储?什么是Vue的指令模块化?
1、如何实现Vue的异步组件? 在Vue中,可以使用异步组件来加载远程数据,或者在组件的生命周期中执行一些耗时操作。实现异步组件,需要使用Vue的异步组件和Vue的组件系统。 下面是一个基本的示例: <template><…...

《HeadFirst设计模式(第二版)》第六章代码——命令模式
代码文件目录: Command package Chapter6_CommandPattern.Command;/*** Author 竹心* Date 2023/8/6**/public interface Command {public void execute();public void undo();//撤销该指令 }CeilingFan package Chapter6_CommandPattern.ElectricAppliance;/*** …...

JS 原型与继承2
//***-、原型、原型链、构造函数 prototype、 proto_、constructor function Foo(){this.a1} var foo new Foo(); Object.getPrototypeOf(foo);//访问对象原型 效果等同于,foo. proto ,只是更推荐使用 Es6的 Object.getPrototypeof()方式 // construct…...