之前用select 和option標(biāo)簽寫了個(gè)自定義穿梭框，但發(fā)現(xiàn)問題多多
http://www.reibang.com/p/949b50e2bf11

首先 option標(biāo)簽內(nèi)是不支持增加標(biāo)簽的，基本上你只能使用文本纵寝，而且很多樣式都不支持庆亡。比如業(yè)務(wù)上希望option內(nèi)的內(nèi)容能自動(dòng)換行，然而碰到火狐瀏覽器唆鸡，option標(biāo)簽內(nèi)自動(dòng)換行的樣式就失效了兄裂。

這樣的穿梭框不是一個(gè)完美的穿梭框。于是打算用div標(biāo)簽重寫一個(gè)寄摆。

構(gòu)思是保持select和option的框選谅辣，多選，全選功能婶恼，選擇功能用鼠標(biāo)事件實(shí)現(xiàn)桑阶。

<template>
  <div class="checkbox-list">
    <input
      type="input"
      style="height: 0; position: absolute; z-index: -1"
      ref="inputRef"
      @keyup="(ev) => onKeyPress(ev)"
    />
    <div
      :class="['checkbox-list__item', { 'item-checked': checkKeys.includes(item.value) }]"
      v-for="(item, idx) in checkOptions"
      :key="idx"
      @mousedown="(ev) => onMouseDown(ev, item, idx)"
      @mouseenter="(ev) => onMouseEnter(ev, item, idx)"
      @mouseup="(ev) => onMouseUp(ev, item, idx)"
    >
      <slot name="dot" v-bind="item"></slot>
      <SlotRender :fun="item.render" :data="item.label" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { computed, watch, useSlots, ref } from 'vue';
  import { useDragSelect } from './hooks/useDragSelect';
  // import { useDebounceFn } from '@vueuse/core';
  const emit = defineEmits(['change']);
  const slots = useSlots();
  const inputRef = ref();
  const SlotRender = {
    props: {
      fun: Function || undefined,
      data: Object || undefined,
    },
    setup(props2) {
      return () => {
        return props2.fun ? props2.fun(props2.data || {}) : '';
      };
    },
  };

  const props = defineProps({
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    dot: {
      type: String,
    },
  });
  const checkKeys = ref([]);
  watch(
    () => props.items,
    () => {
      checkKeys.value = [];
    },
    {
      immediate: true,
    },
  );
  const checkOptions = computed(() => {
    let arr;
    if (slots.render) {
      arr = props.items.map((r) => {
        const item = {
          ...r,
          label: r,
          render: slots.render,
        };
        return item;
      });
    } else {
      arr = props.items;
    }
    return arr;
  });

  const { onMouseDown, onMouseEnter, onMouseUp } = useDragSelect({
    checkOptions,
    checkKeys,
    emit,
    inputRef,
  });
  const onKeyPress = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    if (ev.ctrlKey && ev.code === 'KeyA') {
      checkKeys.value = checkOptions.value.map((r) => r.value);
      emit('change', checkKeys.value);
    }
  };
  const checkAll = (val) => {
    checkKeys.value = val
      ? props.items.map((r) => {
          return r.value;
        })
      : [];
  };
  const resetSelected = () => {
    checkKeys.value = [];
    emit('change', []);
  };
  defineExpose({
    checkAll,
    resetSelected,
  });
</script>
<style lang="less" scoped>
  .checkbox-list {
    overflow: auto;
    &__item {
      width: 100%;
      padding: 0 5px;
      cursor: default;
      &.item-checked {
        background-color: rgb(0, 132, 255);
        color: #fff;
      }
    }
  }
</style>

請(qǐng)留意，列表內(nèi)增加了一個(gè)不可見的input 元素勾邦。這是用于全選功能的一個(gè)輔助標(biāo)簽蚣录。因?yàn)楫?dāng)按ctrl + A 時(shí)，必須激活一個(gè)表單元素眷篇，div元素focus是沒有效果了萎河。表單元素激活后，鍵盤事件才生效蕉饼。

與拖動(dòng)選擇相關(guān)的一些方法都封裝在另一個(gè)文件useDragSelect里：

import _ from 'lodash';
// 拖拽選擇實(shí)現(xiàn)
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,
  };
}