directive.js
引入jquery
function getInput(el) {
let inputEle
if (el.tagName !== 'INPUT') {
inputEle = el.querySelector('input')
} else {
inputEle = el
}
return inputEle
}
function dispatchEvent(el, type) {
const evt = document.createEvent('HTMLEvents')
evt.initEvent(type, true, true)
el.dispatchEvent(evt)
}
// 聚焦指令 v-focus
const focus = (app) => {
app.directive('focus', {
mounted(el) {
const children = $(el).find('input')[0]
// $(children)[0].autofocus = true;
// console.log($(children),"$(children)")
$(children).focus()
}
})
}
// 过滤前后空格的指令 v-trim
const trim = (app) => {
app.directive('trim', {
mounted(el) {
const 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')
}
}
// 回车后过滤空格(因为输入框可以回车调接口查询,所以这时候单纯的失去焦点过滤不起作用,要对回车键单独做一下处理)
const keydown = function(event) {
if (event.keyCode === 13) {
const newVal = event.target.value.trim()
if (event.target.value !== newVal) {
event.target.value = newVal
dispatchEvent(inputEle, 'input')
}
}
}
el.inputEle = inputEle
el._blurHandler = handler
el._keyHandler = keydown
inputEle.addEventListener('blur', handler)
inputEle.addEventListener('keydown', keydown)
},
unmounted(el) {
const { inputEle } = el
inputEle.removeEventListener('blur', el._blurHandler)
inputEle.removeEventListener('keydown', el._keyHandler)
}
})
}
export default (app) => {
focus(app)
trim(app)
}
main.js
import defineDirectives from '/@/utils/directive.js';
defineDirectives(app);
页面上,在元素dom上面直接添加v-focus
,v-trim
,如果是弹窗的话,需要打开弹窗之后执行才生效