【Vue3】穿梭框 -- 思路与实现分析

CSDN话题挑战赛第2期
参赛话题：学习笔记

*学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。

---

【Vue3】穿梭框 – 思路与实现分析

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

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

需求

• 左右选项框，渲染可选选项
  • 左右 选项 通过 被选后 移动到对应左右选框
• 选框的全选（全不选）
• 有禁止选择的选项
• 实时显示被选的选项个数
• 移动后 选项 的选择勾选 自动取消

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

记得注意细节：如：

• 选项移动后 选择状态自动取消

效果

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

思路&代码

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

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

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

  • let leftListData = ref([{},{}])
    // 使用ref 前记得引入
    

• 使用了 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的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主