做磨砂卡贴的网站,快点号自媒体平台注册,服务器网站建设维护合同,网站建设的主要内容需求背景 就是页面很多表单输入框#xff0c;期望在提交的时候#xff0c;都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格#xff0c; 比如我想输入 你好啊 中国, 这中间的空格输入不了#xff0c;只能变成 你好啊中国 ❌在提交的时候使用…需求背景 就是页面很多表单输入框期望在提交的时候都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格 比如我想输入 你好啊 中国, 这中间的空格输入不了只能变成 你好啊中国 ❌在提交的时候使用 trim()方法去两边空格 需要一个个字段的添加容易出错有必填项的校验麻烦比如用户输入了多个空格 我们希望能在输入框下面有提示
期望实现
✅封装一个指令能够在鼠标失焦的时候把两边的空格去掉这样就对之前的业务代码没有影响✅Input,TextArea都能支持✅不区分组件库ElementAntd, iview这些的Input都能使用
希望如下几种使用方法都支持 el-formel-form-iteminput typetext v-modelinputs.aaa placeholder普通inut v-trim //el-form-itemel-form-itemel-input v-modelinputs.bbb placeholderel-input v-trim //el-form-itemel-form-item v-trimel-input v-modelinputs.ccc placeholder外层使用 //el-form-item/el-form实现
Vue3版本
/*** 去除两边空格* el-input v-modelxxx v-trim/el-input*/function getInput(el) {let inputEle;const { tagName } el;if (tagName INPUT || tagName TEXTAREA) {inputEle el;} else {inputEle el.querySelector(input);if (!inputEle) {inputEle el.querySelector(textarea);}}return inputEle;
}function dispatchEvent(el, type) {let evt document.createEvent(HTMLEvents);evt.initEvent(type, true, true);el.dispatchEvent(evt);
}const Trim {mounted: el {if (!el) return;let inputEle getInput(el);const handler function (event) {const newVal event.target.value.trim();if (event.target.value ! newVal) {event.target.value newVal;dispatchEvent(inputEle, input);}};el.inputEle inputEle;el._blurHandler handler;inputEle?.addEventListener(blur, handler);},beforeUnmount(el) {const { inputEle } el;inputEle?.removeEventListener(blur, el._blurHandler);},
};Trim.install app {app.directive(trim, Trim);
};export default Trim;
Vue2版本
/*** 去除两边空格* 使用 el-input v-modelxxx v-trim/el-input*/
function getInput(el) {let inputEle;const { tagName } el;if (tagName INPUT || tagName TEXTAREA) {inputEle el;} else {inputEle el.querySelector(input);if (!inputEle) {inputEle el.querySelector(textarea);}}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)}
}
Trim.install function(Vue) {Vue.directive(trim, Trim)
}
export default Trim
使用
templatediv classcontainer测试页面el-formel-form-iteminput typetext v-model.triminputs._a placeholder原生input,v-model.trim能实现 //el-form-itemel-form-iteminput typetext v-modelinputs.aaa placeholder普通inut v-trim //el-form-itemel-form-itemel-input v-modelinputs.bbb placeholderel-input v-trim //el-form-itemel-form-item v-trimel-input v-modelinputs.ccc placeholder外层使用 //el-form-item/el-form/div
/templatescript
export default {name: TestPage,data() {return {inputs: {aaa: ,bbb: ,ccc: ,},}},
}
/script
style langscss scoped
.el-form {padding-top: 100px;max-width: 500px;margin: 0 auto;input {width: 100%;padding: 0 20px;height: 40px;}
}
/style效果预览
