编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue实现穿梭框效果

- Author -

知我未?蚝秘

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js作用域及作用域链概念理解及使用

Apr 15 Javascript

通过XMLHttpRequest和jQuery实现ajax的几种方式

Aug 28 Javascript

js实现索引图片切换效果

Nov 21 Javascript

JavaScript中Window对象的属性及事件

Dec 25 Javascript

JS使用JSON作为参数实例分析

Jun 23 Javascript

微信小程序商品详情页的底部弹出框效果

Nov 16 Javascript

koa2使用ejs和nunjucks作为模板引擎的使用

Nov 27 Javascript

webpack4实现不同的导出类型

Apr 09 Javascript

Vue 之孙组件向爷组件通信的实现

Apr 23 Javascript

react-native滑动吸顶效果的实现过程

Jun 03 Javascript

Vue程序调试的方法

Jun 17 Javascript

微信小程序自定义弹出层效果

May 26 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