vue利用自定义指令全局去除el-input框前后空格

需求

当用户输入的时候，我们需要自动去掉输入框两边的空格，注意，中间是能输入空格的
我们一般使用的是 v-model.trim，原生的input框是可以的，但封装之后的会把所有空格都去掉，例如el-input.

此时我们利用全局自定义指令实现对el-input的只去除首尾空格的需求。

1、在directive文件夹下创建一个trim文件夹

2、index.js文件

/*** 去除两边空格* 使用 <el-input v-model="xxx" v-trim></el-input>*/
function getInput(el) {let inputEleif (el.tagName !== 'INPUT') {inputEle = el.querySelector('input')} else {inputEle = el}return inputEle
}
function dispatchEvent(el, type) {let evt = document.createEvent('HTMLEvents')evt.initEvent(type, true, true)el.dispatchEvent(evt)
}
const Trim = {inserted: el => {let inputEle = getInput(el)const handler = function (event) {const newVal = event.target.value.trim()if (event.target.value != newVal) {event.target.value = newValdispatchEvent(inputEle, 'input')}}el.inputEle = inputEleel._blurHandler = handlerinputEle.addEventListener('blur', handler)},unbind(el) {const { inputEle } = elinputEle.removeEventListener('blur', el._blurHandler)}
}
export default Trim

3、引入

4、在main.js中全局引入定义好的directive

import directive from './directive' // directive
Vue.use(directive)

5、使用

vue利用自定义指令全局去除el-input框前后空格相关推荐

Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）
参考网址: (适用vue2)让element-ui的输入框聚焦的4种方式 ElementUI:使input自动聚焦的两种方法使el-form中的el-input自动获取焦点在vue3中,保留了自定 ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

vue利用自定义指令全局去除el-input框前后空格

需求

1、在directive文件夹下创建一个trim文件夹

2、index.js文件

3、引入

4、在main.js中全局引入定义好的directive

5、使用

vue利用自定义指令全局去除el-input框前后空格相关推荐

最新文章

热门文章