EEP_BookPreview/src/utils/directive.js

import Vue from 'vue';

// 输入的只能是数字
Vue.directive('numericOnly', {
  bind(el) {
    // 找到 el 下的 input 标签
    const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
    input.addEventListener('input', (e) => {
      // 如果输入的不是数字，则替换为空
      e.target.value = e.target.value.replace(/[^\d]/g, '');
    });
  },
});

/**
 * el-dialog 组件拖拽指令
 */
Vue.directive('dialogDrag', {
  bind(el) {
    const dialog = el.querySelector('.el-dialog');
    const header = el.querySelector('.el-dialog__header');
    if (!dialog || !header) return;

    header.style.cursor = 'move';

    const resetPosition = () => {
      dialog.style.left = '';
      dialog.style.top = '';
      dialog.style.position = '';
      dialog.style.margin = '';
    };

    // 当对话框隐藏时重置其位置
    const observer = new MutationObserver(() => {
      const isHidden = window.getComputedStyle(el).display === 'none';
      if (isHidden) resetPosition();
    });

    // 监听 el 的 style 和 class 属性变化，以检测对话框的显示状态
    observer.observe(el, {
      attributes: true,
      attributeFilter: ['style'],
    });

    el.__dialogDragCleanup__ = () => observer.disconnect();

    header.onmousedown = (e) => {
      const startX = e.clientX;
      const startY = e.clientY;
      const rect = dialog.getBoundingClientRect();
      const startLeft = rect.left;
      const startTop = rect.top;

      const onMouseMove = (moveEvent) => {
        const dx = moveEvent.clientX - startX;
        const dy = moveEvent.clientY - startY;
        dialog.style.margin = 0;
        dialog.style.left = `${startLeft + dx}px`;
        dialog.style.top = `${startTop + dy}px`;
        dialog.style.position = 'fixed';
      };

      const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };
  },
  unbind(el) {
    // 清理事件监听器和观察者
    if (el.__dialogDragCleanup__) {
      el.__dialogDragCleanup__();
      delete el.__dialogDragCleanup__;
    }
  },
});