VUE自定义指令去除element输入框的空格（同时防止光标抖动）

最新推荐文章于 2024-04-02 00:51:21 发布
最新推荐文章于 2024-04-02 00:51:21 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meraln/article/details/109849275
版权
这篇博客介绍了如何在Vue TypeScript项目中创建一个自定义指令`v-removeSpace`，用于从Element UI输入框中删除空格，并防止光标位置异常抖动的问题。作者提供了`removeSpace.ts`的代码实现，并说明在`main.js`中引入该指令的方法，以及如何在模板中正确使用该指令。
摘要由CSDN通过智能技术生成

技术能力有限，代码写法比较粗糙，各位大佬借鉴一下就好，但我可保证这是我个人原创而且真实可用。
项目是ts的项目，如果想用到js的项目，改一下代码的写法就可以了
removeSpace.ts

import Vue, {
    DirectiveOptions } from 'vue'

const directive: DirectiveOptions = {
   
  componentUpdated (el, {
    value, modifiers }) {
   
    // // 获取真实的inputDOM元素
    let input:any = el.children[0]
最低0.47元/天 解锁文章
Yasuo Man
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue利用自定义指令全局去除el-input框前后空格
蜗牛~~
03-13 6080
当用户输入的时候，我们需要自动去掉输入框两边的空格， 注意，中间是能输入空格的。此时我们利用全局自定义指令实现对el-input的只去除首尾空格的需求。1、在directive文件夹下创建一个trim文件夹。2、index.js文件。
Vue中通过键盘事件去除输入框中空格
ForgivenCheney的博客
08-04 1695
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 一、项目场景 项目业务基于Vue以及ElementUI下的后台管理系统，其中涉及到对表单的正则验证，表单验证的要求是去除输入框中的空格，并将字母进行大写转换。 二、遇到的问题 最初的解决思路： Vue本身提供了去除空格的修饰符 v-model.trim 所以可以通过 v-model.t...
VUE 项目去除 input 框值 所有空格
热门推荐
weixin_52703987的博客
05-24 3万+
去除空格的方法 str.trim(); //去掉首尾空格 str.replace(" ",""); //去除所有空格，包括首尾、中间 str.replaceAll(" ", ""); //去掉所有空格，包括首尾、中间 str.replaceAll(" +",""); //去掉所有空格，包括首尾、中间 str.replaceAll("\\s*", ""); //可以替换大部分空白字符， 不限于空格 正则： str.replace(/\s*/g,"") str.replace(/\ +/g, "");
【vue2】element ui input全局默认去除前后空格
yurisa1994的博客
10-31 1974
element ui — el-input 去除输入value值的空格，最好是双管齐下。页面组件：v-model加上.trim，可以去除输入的空格，全局去除复制文本的空格。
vue去掉所有输入框两边空格，封装指令去空格，支持Vue2和Vue3，ElementUI Input去空格
阿飞
08-08 6241
解决Vue v-model.trim 去空格问题， 让你的Input轻松去掉两边空格，支持原生，支持Element UI 的Input，支持 TextArea, Vue2,Vue3
elementUI输入框去除空格
qq_46580571的博客
04-29 2208
elementUI输入框去除空格
vue自定义指令限制输入框输入值的步骤与完整代码
10-14
Vue.js是目前非常流行的前端框架之一，它提供了一种非常方便的方式来操作DOM，其中自定义指令是Vue中的一项重要特性，允许开发者创建可复用的指令来封装DOM操作。在这篇文章中，将会详细介绍如何创建一个自定义指令...
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
Vue自定义弹窗指令的实现代码
10-18
在Vue.js框架中，自定义指令是一种扩展Vue组件行为的方式，它们可以被添加到任何元素上。这篇文章主要讲解了在Vue2.0版本中如何创建一个自定义弹窗指令，使得具有该指令的标签在被点击时能够显示一个弹窗。 ### ...
【vue input文本框自动去空格和特殊字符 】全局自定义指令
weixin_43208652的博客
01-27 1974
// main.js 注册一个全局自定义指令 `不允许输入空格&*等特殊字符` 指令：v-filter-special-char Vue.directive('filterSpecialChar', { update: function (el, { value, modifiers }, vnode) { try { let a_el=el.children[0] //此处可以debug看看el具体值是什么,这里演示的
Input输入框过滤空格方法
lyclyc_的博客
04-29 1万+
前端中判断input输入框是否输入是否有空格，实现过滤输入前和输入后的空格， v-model.trim用于去掉输入框内首尾空格 如下绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的， <el-input type="text" v-model.trim="test00" ></el-input> 如果判断Input输入框是否为空，不为空时再提交，可以用 If(this.inputData.trim().length !==0){
Vue——过滤饿了么input，限制输入空格
weixin_43551242的博客
01-09 570
//过滤饿了么input，限制输入空格(vue修饰符)使用v-model.trim="serviceContent"或者v-filter-special-char="serviceContent" //https://www.jianshu.com/p/0dc6f7971f48 //v-model.lazy只有在input输入框发生一个blur时才触发、v-model.trim将用户输入的前后的空格去掉、v-model.number将用户输入的字符串转换成number <el-input :rows=
element ui input 如何去掉所有空格,去掉首位空格-不用.trim
weixin_57246351的博客
08-17 1006
去空格
vue中elementui el-input绑定的值如何过滤掉输入的空格？
最新发布
高性价比服务器就选：蓝易云
04-02 538
有时，我们可能希望过滤掉用户输入的空格，为此，我们可以利用Vue的双向数据绑定和计算属性（computed property）的特性来实现。这种方法的优点是它可以实时地过滤掉输入的空格，而不需要等待输入完成。但是，它可能会影响到输入的流畅性，特别是在处理大量输入或者在性能较低的设备上。总的来说，Vue和Element UI提供了强大而灵活的工具来处理用户的输入，我们可以根据实际的需求来选择合适的方法。但是这种方法只能移除字符串两端的空格，如果我们想要移除字符串中所有的空格，我们可以使用。
elementui全局去掉输入框前后的空格
weixin_53504747的博客
04-08 2271
1.先创建一个el-components.js文件 import Vue from 'vue' import ElementUI from 'element-ui'; /** * @MethodAuthor: YuanZheLi * @Date: 2022-01-10 15:27:00 * @Description: 统一格式化去除input首尾空格 */ Vue.component('el-input', { extends: ElementUI.Input, created() {
element plus input 设置clearable focus时闪烁问题
supming1的专栏
04-11 1718
element plus input 设置clearable focus时闪烁问题
element必填校验 输入空格问题，修改正则表达式、请求拦截器，实现所有输入框去除首尾空格
韩旭的博客
05-14 1万+
文章目录一、element-ui,必填校验输入空格是可以通过校验的？二、解决方案?v-model.trim修饰符?三、采用pattern，手写正则的方式实现功能功能。四、请求拦截器过滤所有的请求参数，对应的参数首尾空格全部去掉。 一、element-ui,必填校验输入空格是可以通过校验的？ 我们可以看一下elemen-ui的源码， 我们可以看到其实element-ui对应el-form-item关于必填校验的部分是采用了rules,rules.length去进行的校验 我们需要知道的是其实空格也同样
写一个vue自定义指令，element dialog顶部拖拽，并且不能拖离页面
06-11
好的，下面是一个实现element dialog顶部拖拽的Vue自定义指令，并且限制其不能拖离页面的示例代码： ```javascript // draggable.js export default { inserted(el, binding) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dialogWrapperEl = el.querySelector('.el-dialog__wrapper') const containmentEl = binding.value ? document.querySelector(binding.value) : dialogWrapperEl let isDragging = false let lastX = 0 let lastY = 0 dialogHeaderEl.style.cursor = 'move' dialogHeaderEl.addEventListener('mousedown', (e) => { isDragging = true lastX = e.clientX lastY = e.clientY document.addEventListener('mousemove', handleMouseMove) document.addEventListener('mouseup', handleMouseUp) }) function handleMouseMove(e) { if (isDragging) { const deltaX = e.clientX - lastX const deltaY = e.clientY - lastY const dialogRect = dialogWrapperEl.getBoundingClientRect() const containmentRect = containmentEl.getBoundingClientRect() let newLeft = dialogRect.left + deltaX let newTop = dialogRect.top + deltaY // Limit the dialog to the containment element if (newLeft < containmentRect.left) { newLeft = containmentRect.left } if (newTop < containmentRect.top) { newTop = containmentRect.top } if (newLeft + dialogRect.width > containmentRect.right) { newLeft = containmentRect.right - dialogRect.width } if (newTop + dialogRect.height > containmentRect.bottom) { newTop = containmentRect.bottom - dialogRect.height } dialogWrapperEl.style.left = newLeft + 'px' dialogWrapperEl.style.top = newTop + 'px' lastX = e.clientX lastY = e.clientY } } function handleMouseUp() { isDragging = false document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('mouseup', handleMouseUp) } } } ``` 上述代码定义了一个名为`draggable`的Vue自定义指令，可以用于实现element dialog顶部拖拽的效果，并且限制其不能拖离页面。该指令监听了dialog header元素的mousedown、mousemove和mouseup事件，并且根据鼠标的移动距离来实现拖拽效果。同时，通过传入`value`参数来指定限制拖拽区域的父级元素选择器。 使用该自定义指令的示例如下： ```vue <template> <el-dialog v-draggable=".container"> <div class="el-dialog__header"> <span>{{ title }}</span> </div> <div class="el-dialog__body"> {{ content }} </div> </el-dialog> </template> <script> import draggable from '@/directives/draggable' export default { directives: { draggable }, data() { return { title: 'Dialog Title', content: 'Dialog Content' } } } </script> ``` 在上述代码中，我们为el-dialog元素添加了`v-draggable=".container"`指令，表示限制拖拽区域的父级元素选择器为`.container`。注意，我们需要为dialog header元素添加一个类名为`el-dialog__header`的div，以便在指令中获取到该元素进行拖拽。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值