customInstructions.ts 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { Directive, ObjectDirective } from 'vue';
  2. // 权限控制
  3. const PermissionDirective: Directive = {
  4. mounted(el: HTMLElement, binding: { value: string[] }, vnode: any) {
  5. const routePath = vnode.ctx.appContext.config.globalProperties.$route.path;
  6. console.log(extractPath(routePath))
  7. // const currentRoute = getCurrentInstance()?.appContext.config.globalProperties.$route;
  8. // console.log('Current Route:', currentRoute);
  9. // const permissions = binding.value;
  10. // if (!Array.isArray(permissions)) {
  11. // console.error('Permissions must be provided as an array.');
  12. // return;
  13. // }
  14. // if (!permissions.some((permission: string) => permission === 'admin')) {
  15. // el.parentNode && el.parentNode.removeChild(el)
  16. // }
  17. }
  18. };
  19. const PositiveIntegerDirective: ObjectDirective = {
  20. mounted(el: HTMLElement) {
  21. el.addEventListener('input', handleInput);
  22. },
  23. beforeUnmount(el: HTMLElement) {
  24. el.removeEventListener('input', handleInput);
  25. },
  26. };
  27. function handleInput(event: Event) {
  28. const input = event.target as HTMLInputElement;
  29. const regex = /^\d*\.?\d*$/;
  30. if (!regex.test(input.value)) {
  31. input.value = input.value.replace(/[^\d\.]/g, '');
  32. }
  33. }
  34. function extractPath(str: any) {
  35. const startIndex = str.indexOf('/');
  36. const endIndex = str.indexOf('/', startIndex + 1);
  37. return str.slice(startIndex, endIndex !== -1 ? endIndex : undefined);
  38. }
  39. // 导出的自定义指令
  40. const customize = [
  41. { key: 'permission', directive: PermissionDirective, name: '角色权限' },
  42. { key: 'enterNumber', directive: PositiveIntegerDirective, name: 'input正整数' }
  43. ]
  44. export default customize;