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 相关文章推荐
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
详解AngularJS之$window窗口对象
Jan 17 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
angularJS开发注意事项
2018/05/26 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
详解如何利用Cython为Python代码加速
2018/01/27 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
Sql面试题
2013/03/20 面试题
大学毕业生自荐书怎么写?
2014/01/06 职场文书
学习作风建设心得体会
2014/10/22 职场文书
小学班主任心得体会
2016/01/07 职场文书
导游词之唐山景点
2019/12/18 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android