使用Vue3实现一个穿梭框效果的示例代码

      <div class="module-wrapper">
        <div class="module-head">
          <span>list1</span>
          <span>{{ currentSelectLeft }}</span>
        </div>
        <div class="module-content">
          <div v-if="!listLeft.length" style="text-align: center">No data</div>
          <div class="module-item" v-for="(item, index) in listLeft" @click="handleTransferLeft(index)">
            <input style="width: 20px; height: 20px" type="checkbox" :checked="item.checked" />
            <span
              :style="{
                color: item.checked ? '#68b2ff' : '#000',
              }"
              >{{ item.label }}</span
            >
          </div>
        </div>
      </div>

function getListData() {
  let data = []
  for (let index = 1; index <= 10; index++) {
    data.push({
      key: index,
      label: 'option' + index,
    })
  }

  //对data进行处理 默认我们认为没有checked属性
  data.forEach((item) => {
    item.checked = false
  })
  listLeft.value = data
}

// 点击进行状态取反
function handleTransferLeft(currentIndex) {
  listLeft.value[currentIndex].checked = !listLeft.value[currentIndex].checked
}

// 左侧checked的数据
const currentCheckedLeft = computed(() => {
  return listLeft.value.filter((item) => item.checked)
})

// 点击右箭头
function toRight() {
  // 对选中数据进行深拷贝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把刚选择的数据状态进行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })
  // 把选中的数据添加到右边 需要把刚选择的数据状态进行清除
  listRight.value.push(...deepCloneData)
  // 对右边数据进行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

  // 找到未选中数据 进行重新赋值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData
}

  // 对选中数据进行深拷贝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把刚选择的数据状态进行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })

 // 把选中的数据添加到右边 需要把刚选择的数据状态进行清除
  listRight.value.push(...deepCloneData)

  // 对右边数据进行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

  // 找到未选中数据 进行重新赋值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData