闲来无事写了个完美的选老婆穿梭框
提示:项目在vue脚手架上跑的
话不多说先上代码:
<template> <div> <div class="nav"><h1>请选择老婆</h1></div> <div class="content"> <div id="my"> <!--源--> <div class="panel"> <div class="panel-heading"> <span class="pull-right"> <label> <input type="checkbox" v-model="allCheck" @change="allCheckBox" :disabled="leftData.length == 0">全选 </label> </span> <span class="pull-right">{{number(leftData,true)}}/{{leftData.length}}</span> </div> <div class="panel-body"> <ul> <li class="out" v-for="(v,i) in leftData" :key="i"> <div class="checkbox"> <label> <input class="boot" type="checkbox" v-model="v.check" @change="left">{{v.name}} </label> <img class="img" :src="v.src" alt=""> </div> </li> </ul> </div> </div> <!--按钮--> <div class="text-center"> <div> <button class="btn" :disabled="leftData.length == 0" @click="toright()">>></button> </div> <div> <button class="btn" :disabled="rightData.length == 0" @click="toleft()"><<</button> </div> </div> <!--目标数据--> <div class="panel"> <div class="panel-heading"> <span class="pull-right"> <label> <input type="checkbox" @change="checkAllBox" v-model="checkAll" :disabled="rightData.length == 0">全选 </label> </span> <span class="pull-right">{{number(rightData,true)}}/{{rightData.length}}</span> </div> <div class="panel-body"> <ul> <li class="out" v-for="(v,i) in rightData" :key="i"> <div class="checkbox"> <label> <input class="boot" type="checkbox" v-model="v.check" @change="right">{{v.name}} </label> <img class="img" :src="v.src" alt=""> </div> </li> </ul> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { allCheck: false, checkAll: false, leftData: [], rightData: [] } }, methods: { getFemale() { this.axios.get("../../static/getfemale.json").then(resulet => { this.leftData = resulet.data.message; }) }, toright() { var selectData = this.getto(this.leftData, true);//获取左边状态为true的数据 this.rightData.unshift(...selectData);//将获取的数据push到右边去。 if (this.allCheck) { this.allCheck = !this.allCheck; } this.leftData = this.getto(this.leftData, false);//剔除左边状态为true的数据。 }, toleft() { var selectData = this.getto(this.rightData, true);//获取右边状态为true的数据 this.leftData.unshift(...selectData);//将获取的数据push到左边去。 if (this.checkAll) { this.checkAll = !this.checkAll; } this.rightData = this.getto(this.rightData, false);//剔除右边状态为true的数据。 }, allCheckBox() {//左全选 this.che(this.leftData, this.allCheck) }, checkAllBox() {//右全选 this.che(this.rightData,this.checkAll) }, left() {//左单选 // this.all(this.leftData,this.allCheck) var m = this.leftData.filter(item=>{ return item.check == true; }).length; console.log(m); m == this.leftData.length ? this.allCheck = true : this.allCheck = false; }, right() {//右单选 // this.all(this.rightData,this.checkAll); var m = this.rightData.filter(item=>{ return item.check == true; }).length; console.log(m); m == this.rightData.length ? this.checkAll = true : this.checkAll = false; }, che(data, org) { for (let i=0;i<data.length;i++){ data[i].check = org } }, // all(data,org) { // var m = data.filter(item=>{ // return item.check == true; // }).length; // console.log(m); // m == data.length ? org = true : org = false; // }, getto(data, state) {//获取data中check状态为state的数据,并返回一个数组。 this.axios.get("../../static/getfemale.json").then(resulet => { data = resulet.data.message; }); return data.filter(item => { return item.check == state; }) } }, created() { this.getFemale(); }, computed: { number() { return function (data, state) { return this.getto(data, state).length;//返回data中为state状态的数组的长度, }; } } } </script> <style lang="scss" scoped> * { padding: 0; margin: 0; } .nav { width: 100%; height: 100px; background-color: yellowgreen; h1{ color: #fff; /*background-image: -webkit-gradient( linear, left top, left bottom,color-stop(0, #F8C63D), color-stop(1, #CC66E7));*/ /*color: transparent;*/ /*-webkit-background-clip: text;*/ /*-ms-background-clip: text;*/ text-align: center; line-height: 100px; } } .content #my { margin-top: 30px; height: 350px; display: flex; justify-content: space-between; .panel { width: 45%; .panel-heading { width: 100%; height: 40px; box-shadow: 2px 2px 2px #888888; border-radius: 5px; background-color: #34a0fc; display: flex; justify-content: space-between; .pull-right { display: block; text-align: right; line-height: 40px; color: #fff; margin: auto 15px; } } .panel-body { height: 300px; border: 2px solid rgba(0, 0, 0, .2); border-radius: 5px; margin-top: 11px; overflow-y: scroll; .checkbox { width: 100%; height: 50px; padding: 0 5px; display: flex; justify-content: space-between; .boot { margin-top: 20px; text-align: left; line-height: 50px; } .img { display: inline-block; width: 38px; height: 38px; margin-top: 6px; } } } } .text-center { .btn { width: 50px; font-size: 20px; text-align: center; background-color: yellowgreen; color: #fff; margin-top: 110px; } } } </style>
接着是json数据:
{ "message": [ { "name": "佟丽娅", "check": false, "src": "./static/getimgs/003 (1).jpg" }, { "name": "吴倩", "check": false, "src": "./static/getimgs/003 (1).jpeg" }, { "name": "沈梦辰", "check": false, "src": "./static/getimgs/003 (14).jpg" }, { "name": "邓紫棋", "check": false, "src": "./static/getimgs/003 (13).jpg" }, { "name": "韩雪", "check": false, "src": "./static/getimgs/003 (12).jpg" }, { "name": "李小璐", "check": false, "src": "./static/getimgs/003 (11).jpg" }, { "name": "唐嫣", "check": false, "src": "./static/getimgs/003 (2).jpg" }, { "name": "宋祖儿", "check": false, "src": "./static/getimgs/003 (3).jpg" }, { "name": "章子怡", "check": false, "src": "./static/getimgs/003 (4).jpg" }, { "name": "梁洁", "check": false, "src": "./static/getimgs/003 (5).jpg" }, { "name": "谭松韵", "check": false, "src": "./static/getimgs/003 (6).jpg" }, { "name": "刘亦菲", "check": false, "src": "./static/getimgs/003 (7).jpg" }, { "name": "鞠婧祎", "check": false, "src": "./static/getimgs/003 (8).jpg" }, { "name": "赵丽颖", "check": false, "src": "./static/getimgs/003 (9).jpg" }, { "name": "陈瑶", "check": false, "src": "./static/getimgs/003 (10).jpg" } ] }
效果图:
望大佬点评,提问:程序员应不应该有老婆?