vue3:写一个自定义穿梭框（1）

最近项目有个需求，需要对穿梭框里面的数据进行框选。然而项目本身是基于ant-design-vue组件库的。antd的组件并不支持这个功能。

好在需求有相关实现的参考。那是一个jquery时代的老项目了。实现起来很nice，只需要使用最原始的select - option 表单标签就行了。因为浏览器本身支持select表单选项的框选多选等快捷操作。

于是事情变得简单了。

从最简单的例子开始写。

   
      选项1
      选项2
   

给select设置multiple属性后，显示上就会变为列表。然而要用到穿梭框上，需要再美化一下。

接下来，我封装了一个组件。

这是最简版的，选择列表从items参数传入，选择的变更通过change 事件提供出去。 随着开发的深入，还发现一些问题。当选择完数据移到另一侧列表的时候，虽然原来选择的数据移除了，但选择状态还呈现在列表中。这时就需要一个方法清除选择。

  const selectRef = ref();
  const resetSelected = () => {
    let arr = [...selectRef.value.selectedOptions];
    for (let i = 0; i < arr.length; i++) {
      arr[i].selected = false;
    }
  };
  defineExpose({
    resetSelected,
  });

列表组件写好了。构想一下最终要呈现的界面

先把template大致定下来

可以看到，左右两侧都分别有头部，搜索框，列表。
这两个列表有很多方法和状态是相同的。这时vue3 的composition Api 的优势就发挥出来了。

写一个方法，包含这些状态：

import { reactive, computed, watch } from 'vue';
export function useList() {
  const data = reactive({
    filterItems: [],
    searchValue: '',
    selectedKeys: [],
    checkAll: false,
  });
  function selectedChange(val) {
    data.selectedKeys = val;
  }

  return {
    data,
    selectedChange,
  };
}

在穿梭框主体script上：

穿梭框在参数设计上，为了照顾使用习惯，尽量跟随ant design vue 穿梭框的参数，为了使代码简洁。使用watchEffet方法进行监听。这样，不管在搜索或者数据源变动时，列表都能刷新。