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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
解决使用vue.js路由后失效的问题
Mar 17 Javascript
深入理解Node module模块
Mar 26 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 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
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python字符串拼接的几种方法整理
2017/08/02 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python cs架构实现简单文件传输
2020/03/20 Python
python 把列表转化为字符串的方法
2018/10/23 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python制作简单五子棋游戏
2019/06/18 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
主管会计岗位职责
2014/03/13 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
学校校庆演讲稿
2014/05/22 职场文书
领导工作表现评语
2015/01/04 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
贷款担保书范本
2015/09/22 职场文书
2016年学校招生广告语
2016/01/28 职场文书
找规律教学反思
2016/02/23 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers