Skip to content

Instantly share code, notes, and snippets.

@h1romas4

h1romas4/vue-sample-multiple-selectbox.html

Last active January 27, 2017 01:20
Show Gist options
  • Save h1romas4/131afa9a0575a9674cc3cb602ea26715 to your computer and use it in GitHub Desktop.
Save h1romas4/131afa9a0575a9674cc3cb602ea26715 to your computer and use it in GitHub Desktop.
Download ZIP
2 multiple selectbox & transition-group
Raw
vue-sample-multiple-selectbox.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.box-anime-move {
transition: transform 0.2s;
}
.box-anime-enter-active, .box-anime-leave-active {
transition: all 0.2s;
}
.box-anime-leave-active {
opacity: 1;
}
.box-anime-leave-to {
opacity: 0;
}
.box-anime-enter-active {
opacity: 0;
}
.box-anime-enter-to {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<ol class="breadcrumb">
<li class="active">Vue.js</li>
<li class="active">test1</li>
</ol>
<div class="row" id="selecter">
<!-- Box 0 -->
<div class="col-xs-5">
<div class="panel panel-info">
<div class="panel-heading">Box 0</div>
<div class="list-group">
<transition-group name="box-anime">
<button v-for="item in getBox(items, 0)" v-on:click="onItemClick(item.name)" v-bind:class="{ 'list-group-item-success' : item.checked }" v-bind:key="item.name" type="button" class="list-group-item">
{{item.name}}
</button>
</transition-group>
</div>
</div>
</div>
<!-- ボタン -->
<div class="col-xs-2 text-center">
<div class="btn-group-vertical" role="group">
<button v-on:click="onMove(1)" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
<button v-on:click="onMove(0)" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
</div>
</div>
<!-- Box 1 -->
<div class="col-xs-5">
<div class="panel panel-info">
<div class="panel-heading">Box 1</div>
<div class="list-group">
<transition-group name="box-anime">
<button v-for="item in getBox(items, 1)" v-on:click="onItemClick(item.name)" v-bind:class="{ 'list-group-item-success' : item.checked }" v-bind:key="item.name" type="button" class="list-group-item">
{{item.name}}
</button>
</transition-group>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script>
new Vue({
el: '#selecter',
data: {
items : [],
},
created: function() {
this.items = [
{ name: "テスト1", box: 0, checked: false },
{ name: "テスト2", box: 0, checked: true },
{ name: "テスト3", box: 1, checked: false },
{ name: "テスト4", box: 1, checked: false },
{ name: "テスト5", box: 0, checked: false }
];
},
methods: {
getBox: function(items, box) {
return items.filter(function(item) {
return item.box === box;
})
},
onItemClick: function(name) {
this.items.forEach(function(element, index, array) {
if(element.name === name) {
element.checked = !element.checked;
}
});
},
onMove: function(box) {
this.items.forEach(function(element, index, array) {
if(element.checked && element.box != box) {
element.box = box;
}
});
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment