网页制作工具的选择与网站整体网络没有关系,江苏常州青之峰做网站,企业网盘软件,网络营销的新特点项目反馈输入框内容比较多时候#xff0c;让鼠标光标在最后一个位置#xff0c;心想什么奇葩需求#xff0c;后面试了一下#xff0c;是有点影响体验#xff0c;于是就有了下面的效果#xff0c;我目前的项目都是若依的架子#xff0c;用的是vue2版本。vue3的朋友想要使…项目反馈输入框内容比较多时候让鼠标光标在最后一个位置心想什么奇葩需求后面试了一下是有点影响体验于是就有了下面的效果我目前的项目都是若依的架子用的是vue2版本。vue3的朋友想要使用自行调节
效果图如下 使用方法
前提是指令被注册代码不显示注册内容
el-input v-focus2end v-modeldialog.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))
}
