Vue实现穿梭框效果
更新时间：2020年09月30日 08:46:53 作者：知我未夠好丶
这篇文章主要为大家详细介绍了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中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了VUE记账凭证模块组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-03-03![Vue3配置路由ERROR in [eslint]报错问题及解决](//img.jbzj.com/images/xgimg/bcimg2.png)
Vue3配置路由ERROR in [eslint]报错问题及解决
这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了elementui中使用el-tabs切换实时更新数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue项目做屏幕自适应处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了在vue3.0中如何配置代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了详解Vue CLI 3.0脚手架如何mock数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了vue中动态控制btn的disabled属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
这篇文章主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
![Vue3配置路由ERROR in [eslint]报错问题及解决](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论