自定义指令封装

注册指令

文件夹如图所示

在main.js导入index.js即可

import '@/directives/index';

index.js

/*
 * @Author: kongjinghcao
 * @Date: 2023-09-12 14:26:21
 * @Last Modified by: kongjinghcao
 * @Last Modified time: 2023-12-05 11:46:02
 * @Description: 自定义指令封装
 */
import Vue from 'vue';

// 自动注册modules中的所有文件
const files = require.context('./modules', false, /.+\.js$/);
files.keys().forEach((fileName) => {
  const directiveConfig = files(fileName); // 获取指令函数
  const directiveName = fileName // 获取指令名
    .replace(/^\.\//, '') // 去除开头的'./'
    .replace(/\.\w+$/, ''); // 去除文件扩展名
  Vue.directive(directiveName, directiveConfig.default || directiveConfig);
});

1、v-copy

v-copy=的值，就是需要拷贝的值，点击即可实现拷贝。

const copy = {
  bind(el, { value }, vnode) {
    // eslint-disable-next-line no-param-reassign
    el['data-value'] = value;
    el.addEventListener('click', (e) => {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', e.target['data-value']);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      // vnode.content即 Vue实例, 此处使用了element ui的提示弹框
      vnode.context.$message({ type: 'success', message: '复制成功' });
    });
  },
  componentUpdated(el, { value }) {
    // eslint-disable-next-line no-param-reassign
    el['data-value'] = value;
  },
  unbind(el) {
    el.removeEventListener('click', el.handel);
  },
};
export default copy;

2、v-resize

使用场景：拖拽拉伸左侧菜单的宽度（左侧为原本宽度，右侧为将要拉伸到的宽度）

// 拖拽拉伸宽度
const resize = {
  bind(el，{value}, vnode) {
    el.addEventListener('mousedown', (e) => {
      e.preventDefault();
      const initX = e.clientX;
      const parentDom = el.parentNode;
      const initWidth = parentDom.offsetWidth;
      let newWidth;
      document.onmousemove = (event) => {
        const endX = event.clientX;
        // 最小值，可以在此处设置，也可以通过value传过来
        if (endX < 250) {
          return;
        }
        el.style.left = `${endX}px`;
        el.style.opacity = '1';
        newWidth = endX - initX + initWidth;
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        parentDom.style.width = `${newWidth}px`;
        el.style.opacity = '0';
      };
    });
  },
};

export default resize;