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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 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多线程抓取网页实现代码
2010/07/22 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
react-router实现按需加载
2017/05/09 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python微信操控itchat的方法
2019/05/31 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
开学典礼演讲稿
2014/05/23 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015年植树节活动总结
2015/02/06 职场文书
辞职信范文大全
2015/03/02 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书