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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
原生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共享内存段示例分享
2014/01/20 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python进行文件对比的方法
2018/12/24 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Linux内核产生并发的原因
2016/11/08 面试题
工作鉴定评语
2014/05/04 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
tomcat下部署jenkins的方法
2022/05/06 Servers
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技