欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue3實現(xiàn)一個穿梭框效果的示例代碼

 更新時間：2023年12月01日 08:46:24   作者：JacksonChen  
這篇文章主要給大家介紹了如何使用?Vue3?實現(xiàn)一個穿梭框效果,當選中數據,并且點擊相對應的方向箭頭時,選中的數據會發(fā)送到對面,并且數據會保持正確的順序進行排列,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下

效果

當選中數據，并且點擊相對應的方向箭頭時，選中的數據會發(fā)送到對面，并且數據會保持正確的順序進行排列。

在線預覽：https://chenyajun.fun/#/transfer

實現(xiàn)

左右兩邊邏輯一致，這里只對左側的進行分析

先看一下 html 結構 方便理解

      <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>

數據處理

首先初始化 10 條穿梭框數據，key 屬性用于排序，label 用于展示數據，最后為數據添加 checked 屬性（主要用于標記是否被選中），然后將數據賦值給左邊的列表 listLeft。

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
}

點擊狀態(tài)取反

上面我們初始化了數據，下面需要做的是當點擊每一項 option 的時候讓狀態(tài)取反。

點擊 option 時只需把相應的 index 傳入，然后進行取反操作即可。

// 點擊進行狀態(tài)取反
function handleTransferLeft(currentIndex) {
  listLeft.value[currentIndex].checked = !listLeft.value[currentIndex].checked
}

比例狀態(tài)

我們看到了上面的已選數據和總數據的比例狀態(tài)

先拿到已選數據

// 左側checked的數據
const currentCheckedLeft = computed(() => {
  return listLeft.value.filter((item) => item.checked)
})

將左側選中數據的長度 比上 數據總長度即可

點擊箭頭進行穿梭

// 點擊右箭頭
function toRight() {
  // 對選中數據進行深拷貝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把剛選擇的數據狀態(tài)進行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })
  // 把選中的數據添加到右邊 需要把剛選擇的數據狀態(tài)進行清除
  listRight.value.push(...deepCloneData)
  // 對右邊數據進行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

  // 找到未選中數據 進行重新賦值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData
}

先對選中數據清除狀態(tài)，因為如果不清除狀態(tài)可能會導致穿梭過的的數據仍然還是選中。

如圖所示：1，2是剛穿梭過去的數據，仍保留狀態(tài)

注意需要對選中數據進行深拷貝，因為下面需要用到未選中的數據，如果不進行深拷貝，那下面再去篩選未選中的數據時就會把所有的數據選中。

  // 對選中數據進行深拷貝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把剛選擇的數據狀態(tài)進行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })

接下來篩選出來選中數據后，將數據添加到右邊的數組 

 // 把選中的數據添加到右邊 需要把剛選擇的數據狀態(tài)進行清除
  listRight.value.push(...deepCloneData)

然后再對右邊的數組進行排序

  // 對右邊數據進行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

現(xiàn)在已經將數據穿梭到右側，那怎么去除左側已穿梭的數據呢？

篩選出來左邊未選擇的數據，重新賦值給左邊數組即可

  // 找到未選中數據 進行重新賦值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData

這一步也是上面為什么深拷貝的原因。

如果不進行深拷貝，如圖所示：

已經穿梭了過去，但是取未篩選數據時，因為上面的狀態(tài)已經取反，這里都會選擇到。

總結

我們需要知道如果要實現(xiàn)一個穿梭框效果，我們大概都需要做哪些東西呢？

那首先是對左側的初始化數據，我們需要對數據進行加工，添加 checked 屬性，方便后面進行篩選。

其次是我們找出我們選中的數據，添加到右側，同時把左側選中的數據進行移除。

源碼

GitHub：https://github.com/chenyajun-create/transfer

以上就是使用Vue3實現(xiàn)一個穿梭框效果的示例代碼的詳細內容，更多關于Vue3實現(xiàn)穿梭框的資料請關注腳本之家其它相關文章！

相關文章

最新評論