vue 穿梭框,vue 3 typescript
这篇文章主要介绍了vue3打字稿穿梭框的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
实现功能：模仿元素穿梭框的简单功能
每周分享一个vue3打字稿的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。
效果展示
预览地址
开源代码库地址
开发过程
思路：用两个数组分别记录左右框框里面的值，根据复选框选中状态来实现删除增加即可
超文本标记语言部分
div class=穿梭
！-左边列表-
div class=穿梭箱
div class=shuttle-box-title
差异列表一/div
div class= index-num { item left。长度} }/div
/div
div class=shuttle-box-list
div class= shuttle-box-item v-for=(VO，inx) in itemLeft :key=inx
输入类型= checkbox :value= inx v-model= check left :disabled= VO。已禁用“/{ { VO。标签} }
/div
/div
/div
！-左右操作按钮-
div class=穿梭点击
span @click=goLeft/span
span @click=goRight/span
/div
！-右边列表-
div class=穿梭箱
div class=shuttle-box-title
差异列表二/div
div class= index-num { item right。长度} }/div
/div
div class=shuttle-box-list
div class= shuttle-box-item v-for=(VO，inx) in itemRight :key=inx
输入类型= checkbox :值= inx v-model= check right :禁用= VO。已禁用“/{ { VO。标签} }
/div
/div
/div
/div
分时（同分时)部分
脚本语言
导入{
定义一个组件，
反应性，
托雷夫斯
}来自“vue”
导出默认定义组件({
setup() {
常数数据=反应({
itemLeft: [{
标签: 列表一的第一条数据，
残疾人：真的，
}, {
标签: 列表一的第二条数据，
禁用：假，
}],
itemRight: [{
标签: 列表2的第一条数据，
禁用：假，
}, {
标签: 列表2的第二条数据，
禁用：假，
}],
checkLeft: []，
checkRight: []，
goLeft: ()={
//数组排序
数据。向右检查。排序(数据。排序索引)；
数据。向右检查。foreach((item)={
//将项目权限对应索引的数据移动到左边去
数据。左边的项目。推送(数据。item right[item])；
//移除
data.itemRight.splice(item，1)；
});
//清空
数据。check left=[]；
数据。check right=[]；
},
goRight: ()={
//数组排序
数据。检查左边。排序(数据。排序索引)；
数据。检查左边。foreach((item)={
//将左侧项目对应索引的数据移动到右边去
数据。右项。推送(数据。item left[item])；
//移除
data.itemLeft.splice(item，1)；
});
//清空
数据。check left=[]；
数据。check right=[]；
},
//复选框是绑定的是的数组的索引，所以检验盒的点击的顺序不同的话索引的顺序是不同的，这样删除有可能找不到会报错，排个序从大到小删除就可以
//这个是排序参数
sortIndex: (a，b)={
返回b-a；
}
})
返回{
.toRefs(数据),
}
}
})
/脚本
钢性铸铁部分。穿梭{
宽度：800像素
填充：50px 0；
显示器：flex
justify-content:space-between；
//整个穿梭框。穿梭箱{
宽度：300像素
高度：500像素
边框：1px固体# ddd
//标题。穿梭箱标题{
背景：# f5f 7 fa
填充：0 20像素
高度：40px
行高：40px
显示器：flex
justify-content:space-between；索引号{
颜色：# 909399;
字体大小：12px
字体粗细：400;
}
}
//列表。穿梭箱列表{
填充：20px
//列表项。穿梭箱-项目{
行高：2.0；
}
}
}
//左右穿梭按钮。往复点击{
padding-top:60px；
光标：指针；
跨度{
填充：5px 10px
显示：内嵌-块；
背景：# 409eff
颜色：# ffffff
保证金：0 5px
文本对齐：居中；
}
}
}
关于vue3 typeScript shuttle box的实现示例的这篇文章到此为止。关于vue3 typeScript shuttle box的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。