20240515每日前端-------聊聊vue自定义指令
定义自定义指令
const addListener = function(el, type, fn) {
el.addEventListener(type, fn, false)
}
//去掉空格
const spaceFilter = function(el) {
addListener(el, 'input', () => {
el.value = el.value.replace(/\s+/, '')
})
}
// 限制只能输入整数和小数
const priceFilter = function(el) {
addListener(el, 'input', () => {
el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
if (isNaN(el.value)) {
el.value = ''
}
})
}
// 限制只能输入字母数字
const integerLetterFilter = function(el) {
addListener(el, 'input', () => {
el.value = el.value.replace(/[\W]/g,'')
el.dispatchEvent(new Event('input'))
})
}
export default {
bind(el, binding) {
if (el.tagName.toLowerCase() !== 'input') {
el = el.getElementsByTagName('input')[0]
}
spaceFilter(el)
switch (binding.arg) {
case 'price':
priceFilter(el)
break
case 'integerLetter':
integerLetterFilter(el)
break
default:
console.warn('未知指令类型', binding.arg)
break
}
}
}
指令引入vue
// main.js
import inputFilter from '@/directive/InputFilter.js'
Vue.directive('inputFilter', inputFilter)
使用
<el-input v-model="form.automobilePrice" v-input-filter:price ></el-input>
原文地址:https://blog.csdn.net/weixin_42678822/article/details/138908736
免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!