vue2自定义穿梭框

可以使用Vue2自定义组件来实现穿梭框功能。下面是一个简单的示例：

<template>
  <div>
    <select v-model="selectedItem" multiple>
      <option v-for="item in sourceList" :key="item.id" :value="item">
        {{ item.name }}
      </option>
    </select>
    <div>
      <button @click="moveToTarget">添加</button>
      <button @click="moveToSource">移除</button>
    </div>
    <select v-model="targetList" multiple>
      <option v-for="item in targetList" :key="item.id" :value="item">
        {{ item.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceList: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        { id: 4, name: '选项4' },
      ],
      targetList: [],
      selectedItem: null,
    };
  },
  methods: {
    moveToTarget() {
      if (this.selectedItem) {
        this.targetList.push(this.selectedItem);
        const index = this.sourceList.indexOf(this.selectedItem);
        if (index > -1) {
          this.sourceList.splice(index, 1);
        }
        this.selectedItem = null;
      }
    },
    moveToSource() {
      if (this.selectedItem) {
        this.sourceList.push(this.selectedItem);
        const index = this.targetList.indexOf(this.selectedItem);
        if (index > -1) {
          this.targetList.splice(index, 1);
        }
        this.selectedItem = null;
      }
    },
  },
};
</script>

请注意，这只是一个简单的例子，你可以根据自己的需求进行定制。在上述代码中，使用了两个`<select>`元素来显示源列表和目标列表，通过点击按钮来添加或移除选中的选项。