Vue3:写一个自定义穿梭框（2）

之前用select 和option标签写了个自定义穿梭框，但发现问题多多
https://www.jianshu.com/p/949b50e2bf11

首先 option标签内是不支持增加标签的，基本上你只能使用文本，而且很多样式都不支持。比如业务上希望option内的内容能自动换行，然而碰到火狐浏览器，option标签内自动换行的样式就失效了。

这样的穿梭框不是一个完美的穿梭框。于是打算用div标签重写一个。

构思是保持select和option的框选，多选，全选功能，选择功能用鼠标事件实现。

请留意，列表内增加了一个不可见的input 元素。这是用于全选功能的一个辅助标签。因为当按ctrl + A 时，必须激活一个表单元素，div元素focus是没有效果了。表单元素激活后，键盘事件才生效。

与拖动选择相关的一些方法都封装在另一个文件useDragSelect里：

import _ from 'lodash';
// 拖拽选择实现
export function useDragSelect(options) {
  const { emit, checkKeys, checkOptions, inputRef } = options;
  let dragStart = false;
  let dragStartIndex = -1,
    dragEndIndex = -1,
    isSetChecked = false,
    preCheckKeys: any[] = [];
  const onMouseDown = (ev, _item, index) => {
    ev.preventDefault();
    inputRef.value?.focus();
    if (!ev.ctrlKey) {
      checkKeys.value = [];
    }
    dragStartIndex = index;
    dragStart = true;
    preCheckKeys = [...checkKeys.value];
    if (!checkKeys.value.includes(_item.value)) {
      isSetChecked = true;
    } else {
      isSetChecked = false;
    }
    const currValue = checkOptions.value[index].value;
    if (isSetChecked) {
      checkKeys.value = _.uniq([...preCheckKeys, currValue]);
    } else {
      const newCheck: any[] = [];
      preCheckKeys.forEach((key) => {
        if (currValue !== key) {
          newCheck.push(key);
        }
      });
      checkKeys.value = _.uniq([...newCheck]);
    }
  };
  const onMouseEnter = (ev, _item, index) => {
    dragEndIndex = index;
    ev.preventDefault();
    if (dragStart) {
      const start = Math.min(dragStartIndex, dragEndIndex);
      const end = Math.max(dragStartIndex, dragEndIndex);
      let i = start;
      const currSelected: any[] = [];
      while (i <= end) {
        const _item = checkOptions.value[i];
        currSelected.push(_item.value);
        i++;
      }
      if (isSetChecked) {
        checkKeys.value = _.uniq([...preCheckKeys, ...currSelected]);
      } else {
        const newCheck: any[] = [];
        preCheckKeys.forEach((key) => {
          if (!currSelected.includes(key)) {
            newCheck.push(key);
          }
        });
        checkKeys.value = _.uniq([...newCheck]);
      }
    }
    emit('change', checkKeys.value);
  };
  const onMouseUp = (_ev, _item, index) => {
    _ev.preventDefault();
    _ev.stopPropagation();
    dragStart = false;
    dragEndIndex = index;
    const currValue = checkOptions.value[index].value;
    if (dragEndIndex === dragStartIndex) {
      if (isSetChecked) {
        checkKeys.value = _.uniq([...preCheckKeys, currValue]);
      } else {
        const newCheck: any[] = [];
        preCheckKeys.forEach((key) => {
          if (currValue !== key) {
            newCheck.push(key);
          }
        });
        checkKeys.value = _.uniq([...newCheck]);
      }
    }
    emit('change', checkKeys.value);
  };
  return {
    onMouseDown,
    onMouseEnter,
    onMouseUp,
  };
}