vue3.0如何快速封装自定义指令！
一、输入框自动获得焦点
// 定义自定义指令 v-focus
const vFocus = {
// 当被绑定的元素插入到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus();
}
};
全局注册指令
app.directive('focus', vFocus);
使用：
<input v-focus />二、只能输入数字
const vOnlyNumber = {
mounted(el) {
// 当元素挂载时设置事件监听器
el.addEventListener('input', (event) => {
// 使用正则表达式只允许数字通过
event.target.value = event.target.value.replace(/[^\d]/g, '');
});
},
// 如果需要处理组件更新后的情况，可以添加 updated 钩子
updated(el) {
el.addEventListener('input', (event) => {
event.target.value = event.target.value.replace(/[^\d]/g, '');
});
}
};
// 全局注册指令
app.directive('only-number', vOnlyNumber);
使用：
<input v-only-number type="text" />最近发现一个比较好用的vue+node后台管理系统，vue2+vue3
菜单管理、权限管理、角色管理、主题管理、字典管理、文件管理等等......
如果你正在学习和了解node和vue结合，不妨看看它：node-vue后台系统源码
原文地址：https://blog.csdn.net/weixin_49573188/article/details/145208216
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！