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插件练习
Dec 24 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
vue-ajax小封装实例
Sep 18 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
react组件基本用法示例小结
Apr 27 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php函数连续调用实例分析
2015/07/30 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Django跨域请求原理及实现代码
2020/11/14 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
职称评定个人总结
2015/03/05 职场文书
2016年教师节感言
2015/12/09 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL