Vuejs Dropdown – Dropdown menu with Vuejs
In this post we will show you Vuejs Dropdown – Dropdown menu with Vuejs, hear for Vuejs Dropdown – Dropdown menu with Vuejs we will give you demo and example for implement.
Hear isDemo and for information(Read More), it will help you into development and implement for Vuejs Dropdown – Dropdown menu with Vuejs. This Demo and code will give you document, instruction, installation and other information.
[codepen_embed height=”265″ theme_id=”light” slug_hash=”KNoEPm” default_tab=”css,result” user=”wanxe”]See the Pen Vue Dropdown by Jorge Nieto (@wanxe) on CodePen.[/codepen_embed]
Html for Vuejs Dropdown – Dropdown menu with Vuejs
<!-- add js file -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- css js file -->
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>Vue Autocomplete - Vuejs Dropdown - onlinecode</title>
<!-- script -->
<script id="autocomplete-tpl" type="template/x-template">
<div class="autocomplete">
<p class="control icon-right">
<input type="text" class="input-dropdown"
placeholder=""
@input="onInput($event.target.value)"
@blur="isOpened = false"
@keyup.enter="select"
@keyup.tab="select"
@keydown.down="onDown"
@keydown.up="onUp"
@keyup.esc="isOpen = false"
ref="dropdown"
v-model="search"/>
<i class="chevron bottom"
@click="toggle"
:class="{'chevron-active' : isOpened == true, 'chevron-inactive' : isOpened == false }"></i>
</p>
<!-- transition -->
<transition name="fade" mode="in-out">
<!-- ul -->
<ul class="options-list" v-show="isOpened">
<li v-for="(option, i) in filteredItems"
@mouseenter="selected = i"
@mousedown="select"
:class="{'selected': i === selected}">
{{ option.name }}
<slot name="item" :title="option.name" :thumbnail="option.thumbnail">
</li>
</ul>
</transition>
</div>
</script>
<!-- app -->
<div id="app">
<!-- autocomplete -->
<autocomplete-dropdown :options="options" @select-item="onOptionSelect">
<!-- template -->
<template slot="item" scope="option">
<span>
<!-- img -->
<img :src="option.thumbnail">
</span>
</template>
</autocomplete-dropdown>
</div>
js script for Vuejs Dropdown – Dropdown menu with Vuejs
// component vue
Vue.component('autocomplete-dropdown', {
template: '#autocomplete-tpl',
data() {
return {
isOpened: false,
selected: null,
search: ''
}
},
props: {
options: {
type: Array,
required: true
}
},
methods: {
onInput(value) {
this.isOpened = !!value//(value != '');
this.selected = null;
},
select() {
const selectedOption = this.filteredItems[this.selected]
this.$emit('select-item', selectedOption);
this.search = selectedOption.name;
this.isOpened = false;
},
onDown() {
if(!this.isOpened){
return;
}
this.selected = (this.selected + 1) % this.filteredItems.length;
},
onUp() {
if(!this.isOpened){
return;
}
this.selected = this.selected -1 <0
? this.filteredItems.length -1
: this.selected -1;
},
toggle() {
this.isOpened = !this.isOpened;
if(this.isOpened) {
//this.$refs.dropdown.focus();
}
}
},
computed: {
filteredItems(){
const condition = new RegExp(this.search, 'i')
return this.options.filter(item => item.name.match(condition))
}
}
})
// new vue
new Vue({
data: {
options: [
{
id: 1,
name: 'Homer Simpson',
thumbnail: 'http://lorempixel.com/40/40/people/1'
},
{
id:2,
name: 'Amancio Ortega',
thumbnail: 'http://lorempixel.com/40/40/people/2'
},
{
id:3,
name: 'Peter Parker',
thumbnail: 'http://lorempixel.com/40/40/people/3'
},
{
id: 4,
name: 'John Cena',
thumbnail: 'http://lorempixel.com/40/40/4'
}
]
},
methods: {
onOptionSelect(option) {
console.log(option)
},
}
}).$mount('#app')
Vue.js 2.0+ dropdown
Install for Vue Dropdown :
npm install vue-js-dropdown --save Import for Vue Dropdown :</h2> import Vue from 'vue' import Dropdown from 'vue-js-dropdown'
Vue.use(Dropdown):
Use for Vuejs Dropdown :
<button v-dropdown:foo>Toggle dropdown</button> <dropdown name="foo"> Hello </dropdown>
Positioning for Vuejs Dropdown :
You can use .left, .right, .top, .bottom modifiers to set the position of the dropdown.
Example for Vue Dropdown :
<button v-dropdown:foo.left>Toggle dropdown (left)</button>
Hope this code and post will helped you for implement Vue Dropdown – Dropdown menu with Vuejs. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org