引:https://blog.csdn.net/weCat_s/article/details/120891126?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-120891126-blog-120184742.pc_relevant_landingrelevant&spm=1001.2101.3001.4242.1&utm_relevant_index=3
\\mian.ts
function mount() {
const app = createApp(App)
const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')
let inputHandler = () => {}
app.directive('number', {
mounted (el: HTMLElement, { arg, value }) {
const input: HTMLInputElement = <HTMLInputElement>getInput(el)
if (input) {
const decimal: string = arg ? `(\\.\\d{0,${arg}})?` : ''
const integer: string = value ? `(0|[1-9]\\d{0, ${value - 1}})` : '\\d*'
const regExp: RegExp = new RegExp((integer + decimal), 'g')
inputHandler = () => {
input.value = input.value.toString().trim().replace(/[^\d.]/g, '')?.match?.(regExp)?.[0] ?? ''
}
input.addEventListener('input', inputHandler, true)
}
},
unmounted (el: HTMLElement) {
const input: HTMLInputElement = <HTMLInputElement>getInput(el)
input.removeEventListener('input', inputHandler, true)
}
})
return app
}
\\页面引用
<el-input
v-number
v-model="item.value"
placeholder="请输入"
></el-input>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战