--- theme: channing-cyan --- ## 概述项目开发中，偶尔会用到穿梭框，具体什么场景，可以根据需求而定，但是这个组件不怎么常用，我觉得这个组件蛮有意思的，记录下实现这个组件的过程。 ## 最终效果 ![动画.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c6afb66bfe847df8640f736ec63c16e~tplv-k3u1fbpfcp-watermark.image?) ## 实现原理没用过这个组件的，建议去组件库试一下这个组件的用法，组件分为：**左侧列表**，**中间两个按钮**，**右侧列表**，因此可以划分为三个小组件，通过使用可以得出一个很重要的信息： > $左侧数据=总数据-右侧数据数据$。 ## 实现过程 ### 目录结构 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/844702f75b634e43a10da3a76e284541~tplv-k3u1fbpfcp-watermark.image?) ### 基本用法 ``` ``` ### MyTransfer.vue暴露给用户使用 ``` ``` ### MyTransferList.vue 左右侧列表组件 ``` ``` ### CheckBox.vue多选框组件 ``` ``` ### CenterOperateBtnGroup.vue中间两个操作按钮组件 ``` ``` ### index.js按需导出组件 ``` import MyTransfer from "./MyTransfer.vue"; export { MyTransfer }; ``` ## 总结上面搜索只做了左侧的，右侧的思路和左侧思路是一样的，需要注意写这个组件的时候，把数据隔离清楚就好了。