🦖我是 Sam9029，一个前端

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

需求

• 左右选项框，渲染可选选项

• 左右 选项 通过 被选后 移动到对应左右选框

• 选框的全选（全不选）

• 有禁止选择的选项

• 实时显示被选的选项个数

• 移动后 选项 的选择勾选 自动取消

全部为 Vue 本地 的响应式 数据操作

记得注意细节：如：

• 选项移动后 选择转台自动取消

效果

源码地址：Vue3-transfer - 码上掘金 (juejin.cn)

思路 &代码

其实 从需求里面就可以直接分析出大概思路了，讲太多反而不好理解，就直接从script 标签要做什么说

• 分别为左右 选框 创建 响应式数据

• 数据格式：(数组包对象)

• 使用了 nanoid 来给每一个选项数据作为一标识npm i nanoid
  

• 使用简单 直接引入 import nanoid from 'nanoid'`

• let id = nanoid()
  

• isChecked 选中状态

• isDisable 禁止操作（可有可无--如果不想写禁止选项的需求就不用写）

• 创建 移动函数 实现左右选项的移动

• 参数：

• e 点击时，返回选项 DOM 对象信息

• 记得 在 绑定绑定函数时使用$event，传值（Vue 传 DOM 对象的固定语法）

• _list 值为left ,right
  

• 判断哪一个向哪里选框移动

• 使用 计算属性 computed 来 时刻 检测 选项选中状态的变化

• 创建 全选函数 （我是左右分开写的，有兴趣可尝试合并使用）

• 根据 左右选项的响应式数据对象 筛选其 所有选项的选中状态

• 
  

注意事项

• 记得 在 绑定绑定函数时使用$event，传值（Vue 传 DOM 对象的固定语法）

• 注意 左右移动 中使用 选项新增到 对应的数据框 要使用深拷贝 (消除引用地址的影响)

才开始写 项目功能的笔记 有些找不到如何阐述把功能需求，思路，代码讲解写清楚，这个方面有待提升

🦖我是 Sam9029，一个前端，坚信应无所往

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)