选择下列产品马上在线沟通
服务时间：8:30-17:00
这期内容当中小编将会给大家带来有关使用vue3和typeScript怎么实现一个穿梭框功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
从事
成都服务器托管，服务器租用，云主机，
雅安服务器托管，空间域名，CDN，网络代维等服务。
思路：用两个数组分别记录左右框框里面的值，根据复选框选中状态来实现删除增加即可
html部分
列表一
{{itemLeft.length}}
{{vo.label}}
←
→
列表二
{{itemRight.length}}
{{vo.label}}
ts部分
import {
defineComponent,
reactive,
toRefs
} from 'vue'
export default defineComponent({
setup() {
const data = reactive({
itemLeft: [{
label: '列表1的第一条数据',
disabled: true,
}, {
label: '列表1的第二条数据',
disabled: false,
}],
itemRight: [{
label: '列表2的第一条数据',
disabled: false,
}, {
label: '列表2的第二条数据',
disabled: false,
}],
checkLeft: [],
checkRight: [],
goLeft: () => {
//数组排序
data.checkRight.sort(data.sortIndex);
data.checkRight.forEach((item) => {
//将itemRight对应索引的数据移动到左边去
data.itemLeft.push(data.itemRight[item]);
//移除
data.itemRight.splice(item, 1);
});
//清空
data.checkLeft = [];
data.checkRight = [];
},
goRight: () => {
//数组排序
data.checkLeft.sort(data.sortIndex);
data.checkLeft.forEach((item) => {
//将itemLeft对应索引的数据移动到右边去
data.itemRight.push(data.itemLeft[item]);
//移除
data.itemLeft.splice(item, 1);
});
//清空
data.checkLeft = [];
data.checkRight = [];
},
//checkbox是绑定的是的数组的索引，所以checkbox的点击的顺序不同的话索引的顺序是不同的，这样删除有可能找不到会报错，排个序从大到小删除就可以
//这个是排序参数
sortIndex: (a, b) => {
return b - a;
}
})
return {
...toRefs(data),
}
}
})
css部分
.shuttle {
width: 800px;
padding: 50px 0;
display: flex;
justify-content: space-between;
//整个穿梭框
.shuttle-box {
width: 300px;
height: 500px;
border: 1px solid #ddd;
//标题
.shuttle-box-title {
background: #f5f7fa;
padding: 0 20px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
.index-num {
color: #909399;
font-size: 12px;
font-weight: 400;
}
}
//列表
.shuttle-box-list {
padding: 20px;
//一个列表item
.shuttle-box-item {
line-height: 2.0;
}
}
}
//左右穿梭按钮
.shuttle-click {
padding-top: 60px;
cursor: pointer;
span {
padding: 5px 10px;
display: inline-block;
background: #409eff;
color: #ffffff;
margin: 0 5px;
text-align: center;
}
}
}上述就是小编为大家分享的使用vue3和typeScript怎么实现一个穿梭框功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
本文标题：使用vue3和typeScript怎么实现一个穿梭框功能-创新互联
当前地址：http://scgulin.cn/article/gshes.html
建站
咨询
售后
建站咨询