前言

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

时空穿梭框之旅

示例演示：

这个时空穿梭框实现了：

  • 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. IText PDF简单示例

    package com.exe.learn.demo.itextpdf; import java.io.ByteArrayInputStream; import java.io.File; impor ...

  2. ElasticSearch java api -单例模式

    //单例模式 private static Settings getSettingInstance(){ if(settings==null){ synchronized (Settings.clas ...

  3. 什么是网站TDK？

    什么是网站TDK?可能很多新手站长与SEOer不知道.其实TDK就是网站的标题(title).描述(description)和关键词(keyword),TDK是网站很重要的元素,他是蜘蛛爬取你的网站之 ...

  4. sql语句中判断空值的函数

    COALESCE()函数 主流数据库系统都支持COALESCE()函数,这个函数主要用来进行空值处理,其参数格式如下:  COALESCE ( expression,value1,value2……,v ...

  5. uiautomator python版本

    摘要: 利用jsonrpc技术直接包装uiautomator,调用uiautomator的api在本地直接编写脚本,然后运行测试case,这样比用Java写,然后再打包,runcase要简单的多,关键 ...

  6. git分支merger

  7. js获取URL地址的参数

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  8. [CSP-S模拟测试]:长寿花（DP+组合数）

    题目描述 庭院里有一棵古树.圣诞节到了,我想给古树做点装饰,给他一个惊喜.他会不会喜欢呢?这棵树可以分为$n$层,第$i$层有$a_i$个防治装饰品的位置,有$m$种颜色的装饰品可供选择.为了能让他喜 ...

  9. eclipse项目(java project)如何导入jar包的解决方案列表？

    右键项目-properties-java build path(左侧菜单)-选择libraries 有两种方式,导入jar包实际上就是建立一种链接,并不是copy式的导入 一.导入外部包,add ex ...

  10. python中的list和generator

    # -*- coding:utf-8 -*- # author : Keekuun # 列表生成式,list l1 = [i for i in range(10)] # 或者 l2 = list(ra ...