使用Vue3實現一個穿梭框效果的示例代碼
效果
當選中數據，并且點擊相對應的方向箭頭時，選中的數據會發(fā)送到對面，并且數據會保持正確的順序進行排列。
實現
左右兩邊邏輯一致，這里只對左側的進行分析
先看一下 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)
現在已經將數據穿梭到右側，那怎么去除左側已穿梭的數據呢？
篩選出來左邊未選擇的數據，重新賦值給左邊數組即可
// 找到未選中數據 進行重新賦值 const noCheckedLeftData = listLeft.value.filter((item) => !item.checked) listLeft.value = noCheckedLeftData
這一步也是上面為什么深拷貝的原因。
如果不進行深拷貝，如圖所示：
已經穿梭了過去，但是取未篩選數據時，因為上面的狀態(tài)已經取反，這里都會選擇到。
總結
我們需要知道如果要實現一個穿梭框效果，我們大概都需要做哪些東西呢？
那首先是對左側的初始化數據，我們需要對數據進行加工，添加 checked 屬性，方便后面進行篩選。
其次是我們找出我們選中的數據，添加到右側，同時把左側選中的數據進行移除。
源碼
GitHub：https://github.com/chenyajun-create/transfer
以上就是使用Vue3實現一個穿梭框效果的示例代碼的詳細內容，更多關于Vue3實現穿梭框的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了vue實現頁面切換滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
watch是CompositionAPI的一部分,用于監(jiān)聽響應式數據的變化并執(zhí)行相應的操作,本文主要介紹了詳解vue3中watch監(jiān)聽的幾種情況,具有一定的參考價值,感興趣的可以了解一下2025-03-03
在vue項目中添加高德地圖,對開發(fā)地圖的開發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關于vue項目中使用高德地圖的超詳細步驟,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue elementUI 表單校驗（數組多層嵌套）功能的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網頁的問題解決,文章通過圖文結合的方式給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-08-08
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue3.x ref()語法糖賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了基于Vuejs實現購物車功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
本文主要介紹了vue實現excel表格的導入導出的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04