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 Elemen-ui之穿梭框使用方法详解
本文实例为大家分享了VUE Elemen-ui之穿梭框使用方法,供大家参考,具体内容如下 背景: 现在需要使用穿梭框实现,角色的操作功能 需要使用 Element Transfer 穿梭框 HTML代码: <template> <el-card class="box-card" shadow="never" style="height: 700px;"> <div slot="header" cl
-
vue按需引入element Transfer 穿梭框
Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":
-
Vue实现穿梭框效果
用vue实现的穿梭框,实现基本的功能(数据移动.全选.反选.搜索). 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框</title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"&
-
jQuery实现穿梭框效果
本文实例为大家分享了jQuery实现穿梭框效果的具体代码,供大家参考,具体内容如下 简介:今天给大家带来穿梭框的实现 布局的实现 <div id="box"> <div id="boxleft"> <ul id="left_ul"> </ul> </div> <div id="boxbtn"> <button id="btn_right&q
-
vue自定义弹框效果（确认框、提示框）
本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下 1.自定义确认框和提示框 根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"&
-
Vue 实现穿梭框功能的详细代码
Vue - 实现穿梭框功能,效果图如下所示: css .transfer{ display: flex; justify-content: center; align-items: center; } .transfer>.list { width: 200px; height: 300px; border: 1px solid #000; list-style: none; } .content{ font-size: 30px; margin: 0 20px; } .list>li{ pa
-
vue自定义弹框效果(确认框、提示框)
本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下 1.自定义确认框和提示框 根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"&
-
基于Vue实现树形穿梭框的示例代码
Vue 项目里面需要一个树形的穿梭框,但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好,因为源列表和目标列表都是需要树形结构的,所以说这个就很难搞,但是也不怕,因为大佬太多了,有插件可以提供给我们使用,接下来介绍一下这个插件. 树形穿梭框插件 el-tree-transfer 这个插件很好的实现了vue项目树形穿梭框的功能. 安装链接 上面的连接是npm插件地址,安装步骤也很简单. npm install el-tree-transfer --save 或者 npm i
-
手写可拖动穿梭框组件CustormTransfer vue实现示例
目录 本文内容 最终效果图 组件html布局 穿梭框左侧内容 穿梭框右侧内容 穿梭框中间向左.向右按钮 把排序好的穿梭数据传给父组件 整体代码 小结 本文内容 需求是实现类似 el-transfer的组件,右侧框内容可以拖动排序: 手写div样式 + vuedraggable组件实现. 最终效果图 组件html布局 新建一个组件文件 CustormTransfer.vue,穿梭框 html 分为左中右三部分,使用flex布局使其横向布局,此时代码如下 <template> <div cl
-
基于Vue.js 2.0实现百度搜索框效果
使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum
-
基于 flexible 的 Vue 组件：Toast -- 显示框效果
基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件