Vue实现穿梭框效果


Posted in Javascript onSeptember 30, 2020

用vue实现的穿梭框,实现基本的功能(数据移动、全选、反选、搜索)。

Vue实现穿梭框效果

代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>穿梭框</title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   
   #transfer {
    width: 388px;
    height: 218px;
    border: gray solid 1px;
    display: flex;
   }
   
   .container {
    margin: 10px;
    width: 150px;
    height: 200px;
   }
   
   #btns {
    width: 50px;
    height: 60px;
    margin: auto;
   }
   
   .to {
    margin: 0 10px 10px 10px;
    width: 30px;
   }
   
   .search {
    width: 140px;
    outline: 0;
    margin: 10px 0;
   }
   
   .content {
    list-style: none;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div id="transfer">
   <container :datas="contents" :type="0"></container>
   <div id="btns">
    <input type="button" value=">" @click="change_type(0)" class="to"/>
    <input type="button" value="<" @click="change_type(1)" class="to"/>
   </div>
   <container :datas="contents" :type="1"></container>
  </div>
  <script type="text/javascript">
   Vue.component('container', {
    props: ['datas', 'type'],
    data() {
     return {
      search_word: ''
     }
    },
    template: `
    <div class="container">
     <div class="top">
      <input type="checkbox" name="all" @click="all" :checked="filter_chosen === filter && filter"/>
      <span v-show="filter_chosen">{{filter_chosen}}/</span>{{filter_search_word}}项
     </div>
     <input type="text" placeholder="搜索" @keyup="change_search_word" class="search"/>
     <ul class="contents">
      <li class="content" v-for="(content, idx) in datas" v-show="content.type === type && has_search_word(content.content)">
       <input type="checkbox" @click="change(idx)" :checked="content.chosen"/>{{content.content}}
      </li>
     </ul>
    </div>`,
    methods: {
     change(idx) {
      this.datas[idx].chosen = !this.datas[idx].chosen;
     },
     all() {
      this.change_chosen(!(this.filter_chosen === this.filter));
     },
     change_chosen(bool) {
      this.datas.map(x => {
       if (x.type === this.type ) {
        x.chosen = bool;
       }
      });
     },
     change_search_word(e) {
      this.search_word = e.target.value;
     },
     has_search_word(content) {
      if (this.search_word) {
       return content.includes(this.search_word);
      }
      return true;
     }
    },
    computed: {
     filter() {
      return this.datas.filter(x => x.type === this.type).length;
     },
     filter_chosen() {
      return this.datas.filter(x => x.type === this.type && x.chosen).length;
     },
     filter_search_word() {
      return this.datas.filter(x => x.type === this.type && this.has_search_word(x.content)).length;
     }
    }
   });
   
   new Vue({
    el: '#transfer',
    data: {
     contents: [
      { content: 'a', type: 0, chosen: false },
      { content: 'b', type: 0, chosen: false },
      { content: 'c', type: 0, chosen: false },
      { content: 'd', type: 0, chosen: false },
     ]
    },
    methods: {
     change_type(type) {
      for (content of this.$data.contents) {
       if (content.chosen && content.type === type) {
        content.chosen = false;
        content.type = Number(!type);
       }
      }
     }
    }
   })
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
原生js实现表格翻页和跳转
Sep 29 #Javascript
vue实现井字棋游戏
Sep 29 #Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
一个简单的MySQL数据浏览器
2006/10/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
Vee-Validate的使用方法详解
2017/09/22 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
自定义django admin model表单提交的例子
2019/08/23 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python实现的Iou与Giou代码
2020/01/18 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
美术专业个人自我评价
2014/01/18 职场文书
趣味比赛活动方案
2014/02/15 职场文书
法律专业自荐信
2014/06/03 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
奖学金主要事迹范文
2015/11/04 职场文书