前言

这篇文章主要是分享一个时空穿梭框功能，也就是我们平时用的选择功能。勾选了的项就会进入到另一个框中。

时空穿梭框之旅

示例演示：

这个时空穿梭框实现了：

  • 1、可以全选、反选
  • 2、没有选中时，不可以点穿梭按钮
  • 3、自动计数（共有多少个，选中了多少个）
  • 4、没有数据时，全选不可点击

这里主要是想通过这个示例来抛砖引玉，更多的功能，你可以根据自己的实践需要来实现。下面我们就来看看这示例的相关文件及代码。

文件结构
  1. ├── index.html
  2. ├── main.js
  3. ├── router
  4. │ └── index.js # 路由配置文件
  5. └── components # 组件目录
  6. ├── App.vue # 根组件
  7. ├── Home.vue # 大的框架结构组件
  8. ├── ChangeBox.vue
  9. └── ChangeBoxArea.vue

文件也不多，只要有两个（ChangeBox.vue 和 ChangeBoxArea.vue）下面我们就来看看实现这个示例的代码：

index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>changebox</title>
  7. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. <!-- built files will be auto injected -->
  12. </body>
  13. </html>

本示例主要用到了 bootstrap ，所以我们就在 index.html 中引入了 bootstrap 的 cdn。然后我们就可以直接在示例中使用 bootstrap 给我们提供的 UI 了。

router/index.js
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Home from '@/components/Home'
  5. Vue.use(Router)
  7. export default new Router({
  8. routes: [{
  9. path: '/',
  10. name: 'Home',
  11. component: Home
  12. }]
  13. })

在这里我们直接把 / 路径的配置到 Home 组件。

App.vue
  1. <template>
  2. <div id="app">
  3. <Home></Home>
  4. </div>
  5. </template>
  7. <script>
  8. import Home from "@/components/Home";
  9. export default {
  10. name: "App",
  11. components: { Home }
  12. };
  13. </script>
  15. <style>
  16. #app {
  17. font-family: "Avenir", Helvetica, Arial, sans-serif;
  18. -webkit-font-smoothing: antialiased;
  19. -moz-osx-font-smoothing: grayscale;
  20. color: #2c3e50;
  21. margin-top: 60px;
  22. }
  23. </style>

在根组件中，我们只是做了一件很简单的事，就是引入Home 组件。

Home.vue
  1. <template>
  2. <div>
  3. <change-box></change-box>
  4. </div>
  5. </template>
  6. <script>
  7. import ChangeBox from "@/components/ChangeBox";
  8. export default {
  9. name: "Home",
  10. components: {
  11. ChangeBox
  12. }
  13. };
  14. </script>

Home.vue 组件代码非常地简单，这里其实也可以直接写到根组件上的，但为了养成良好的习惯，我们还是有必要把示例的整体结构往写成更接近实战一些。

好了，上面的基本功做好了之后，我就可以开始这个时空穿梭框的主要代码了的展示了。

ChangeBox.vue
  1. <template>
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-5">
  5. <change-box-area :title="sourceTitle" :data="sourceList"></change-box-area>
  6. </div>
  7. <div class="col-md-2 text-center">
  8. <p><button :disabled="sourceList.length === 0 || sourceRefNum === 0" class="btn btn-primary" @click="toTarget()">》</button></p>
  9. <p><button :disabled="targetList.length === 0 || targetRefNum === 0" class="btn btn-primary" @click="toSource()">《</button></p>
  10. </div>
  11. <div class="col-md-5">
  12. <change-box-area :title="targetTitle" :data="targetList"></change-box-area>
  13. </div>
  14. </div>
  15. </div>
  16. </template>
  18. <script>
  19. import ChangeBoxArea from "./ChangeBoxArea";
  20. // 这里的 isSeleted 属性可以不用添加，可以在 JS 中进行处理，一般情况下后端返回的数据也不会带有类似这种静态状态的属性
  21. let dataList = [
  22. { id: 1, name: "HTML5", isSelected: false },
  23. { id: 2, name: "CSS3", isSelected: false },
  24. { id: 3, name: "Angular", isSelected: false },
  25. { id: 4, name: "Vue", isSelected: false },
  26. { id: 5, name: "Linux", isSelected: false },
  27. { id: 6, name: "JavaScript", isSelected: false }
  28. ];
  29. export default {
  30. components: {
  31. ChangeBoxArea
  32. },
  33. name: "ChangeBox",
  34. data() {
  35. return {
  36. sourceTitle: "请选择",
  37. targetTitle: "已选择",
  38. sourceList: dataList,
  39. targetList: []
  40. };
  41. },
  42. methods: {
  43. exchange(fd, td) {
  44. let selectedItem = fd.filter(item => item.isSelected).map(item => {
  45. return {
  46. ...item,
  47. isSelected: false
  48. };
  49. });
  50. td.push(...selectedItem);
  51. return fd.filter(item => !item.isSelected);
  52. },
  53. // 把选择数据转移到目标（右框）
  54. toTarget() {
  55. this.sourceList = this.exchange(this.sourceList, this.targetList);
  56. },
  57. // 把选择数据转回到源（左框）
  58. toSource() {
  59. this.targetList = this.exchange(this.targetList, this.sourceList);
  60. }
  61. },
  62. computed: {
  63. // 源数据中选中的数量
  64. sourceRefNum() {
  65. return this.sourceList.filter(item => item.isSelected).length;
  66. },
  67. // 目标数据中选中的数量
  68. targetRefNum() {
  69. return this.targetList.filter(item => item.isSelected).length;
  70. }
  71. }
  72. };
  73. </script>

接下来我们再来看看最后一个

ChangeBoxArea.vue
  1. <template>
  2. <div class="panel panel-default">
  3. <div class="panel-heading clearfix">
  4. <div class="pull-left">
  5. <div class="checkbox">
  6. <label>
  7. <input :disabled="data.length === 0" type="checkbox" @click="toggleAll()" :checked="selectedAllStatus"><span>{{title}}</span>
  8. </label>
  9. </div>
  10. </div>
  11. <span class="pull-right">{{selectItemNumber}}/{{data.length}}</span>
  12. </div>
  13. <div class="panel-body">
  14. <ul>
  15. <li v-for="item in data" :key="item.id">
  16. <div class="checkbox">
  17. <label>
  18. <input type="checkbox" v-model="item.isSelected"> {{item.name}}
  19. </label>
  20. </div>
  21. </li>
  22. </ul>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. export default {
  28. name: "ChangeBox",
  29. props: ["title", "data"],
  30. computed: {
  31. // 选择的数量
  32. selectItemNumber() {
  33. return this.data.filter(item => item.isSelected).length;
  34. },
  35. // 全选状态
  36. selectedAllStatus() {
  37. if (
  38. this.selectItemNumber === this.data.length &&
  39. this.selectItemNumber !== 0
  40. ) {
  41. return true;
  42. } else {
  43. return false;
  44. }
  45. }
  46. },
  47. methods: {
  48. // 全选及反选
  49. toggleAll() {
  50. let len = this.data.length;
  51. let slen = this.data.filter(item => item.isSelected).length;
  52. if (len !== slen) {
  53. this.data.map(item => (item.isSelected = true));
  54. } else {
  55. this.data.map(item => (item.isSelected = false));
  56. }
  57. }
  58. }
  59. };
  60. </script>
  61. <style scoped>
  62. ul {
  63. list-style: none;
  64. padding: 0;
  65. }
  66. .checkbox {
  67. margin: 0;
  68. }
  69. </style>

在上面的代码中，有一个地图需要特别的注意下：在全选的input 中我们要使用 :checked 来绑定 selectedAllStatus，而不用 v-model，因为我们的 selectedAllStatus 是一个计算属性，如果把它绑定到 v-model，会报错的：

报错

[Vue warn]: Computed property “selectedAllStatus” was assigned to but it has no setter.

大概意思是说 selectedAllStatus 没有 setter 方法，不能给它赋值，当然，你可以把给这个属性添加 setter 方法，但这样做好像又有点累赘了。为此我们直接使用 :checked 来绑定 selectedAllStatus  属性。

Vue 实现时空穿梭框功能模块就分享到这里，其实这样的需求示例在真实的项目中是有可能出现的，但在项目中这个很有可能会更加复杂，比如：

  • 1、左边的框不是平铺的，而是多级，可展开收缩，勾选了的项才会出现在右边的框中
  • 2、搜索功能
  • 3、不用点中间的两个箭头，而是勾选后，就会自动穿梭到右边去。

这样的需求极为常见，所以你有必要在平时的学习中，把这些东西都自己整理出来，或者把常用的功能模块封装成通用组件，这个对于提高工作效率是非常有用的。花个两三天把它封装成一个常用的组件，以后开发起来，只要遇到这种的基本都可以搬过来用，顶多改改样式，所以也有必要给组件添加必要的属性为定制提供可能。又或者更过分点的，追加一些功能。

Vue2 实现时空穿梭框功能模块的更多相关文章

  1. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  2. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  3. Vue2 实现树形菜单（多级菜单）功能模块

    结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...

  4. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  5. 自定义SWT控件五之自定义穿梭框

    5.自定义穿梭框 package com.view.control.shuttlebox; import java.util.ArrayList; import java.util.HashMap; ...

  6. krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦

    博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...

  7. VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

    工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树 ...

  8. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  9. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

随机推荐

  1. python 模仿 C/C++ 结构体

    import struct from ctypes import * class MyStruct(Structure): _fields_ = [ ("v1", c_char), ...

  2. TCP协议之三次握手四次挥手

    一.TCP协议简述 TCP协议位于传输层用来建立传输数据的通道以及传输数据,那么在这一层的tcp协议就涉及到客户端与服务端通信的连接,数据的传输.关闭连接. 通信的连接使用的就是客户端与服务端的三次握 ...

  3. 前端每日实战：56# 视频演示如何用纯 CSS 描述程序员的生活

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvYVvY 可交互视频 此视频是可 ...

  4. 为什么集合类没有实现Cloneable和Serializable接口？

    为什么集合类没有实现Cloneable和Serializable接口? 克隆(cloning)或者是序列化(serialization)的语义和含义是跟具体的实现相关的.因此,应该由集合类的具体实现来 ...

  5. python 利用subprocess调用cmd命令程序，并正确输出控制台的输出中文

    平台Python3.7 1.利用控制台运行程序后在控制台会输出中文提示,但是用python调用subprocess.run函数后返回的输出是乱码,于是,解决方法是用subprocess.check_o ...

  6. 日常Git使用——2019年12月11日16:19:03

    1.git介绍 1.1 什么是git? 什么是Git? 比如一个项目,两个人同时参与开发,那么就把这个项目放在一个公共的地方,需要的时候都可以去获取,有什么改动,都可以进行提交. 为了做到这一点,就需 ...

  7. boost graph

    Boost Graph provides tools to work with graphs. Graphas are two-dimensional point clouds with any nu ...

  8. JS中数据结构之链表

    1.链表的基本介绍 数组不总是组织数据的最佳数据结构,在很多编程语言中,数组的长度是固定的,所以当数组已被数据填满时,再要加入新的元素就会非常困难.在数组中,添加和删除元素也很麻烦,因为需要将数组中的 ...

  9. HDU 6050 Funny Function —— 2017 Multi-University Training 2

    Funny Function Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  10. 十、future其他成员函数、shared_future、atomic（原子操作）

    一. int mythread(){ cout<<"thread"<<endl; std::chrono::milliseconds dura();//5秒 ...