README
A Vue2 plugin for dropdown container layer
v-dropdown
Projects using
Install
npm i v-dropdown --save
Include in your component/plugin/page
<v-dropdown>
some contents you want
</v-dropdown>
<script>
import Dropdown from 'v-dropdown';
export default {
components: {
'v-dropdown': Dropdown
}
};
</script>
Use case
<template>
<button type="button" ref="caller" @click="open" >Open</button>
<v-dropdown ref="drop" @show-change="showChange">
some contents you want
</v-dropdown>
</template>
<script>
import Dropdown from 'v-dropdown';
export default {
components: {
'v-dropdown': Dropdown
},
data(){
return {
show: false
};
},
methods: {
showChange(val){
this.show = val;
},
open(){
if(!this.show) this.$refs.drop.$emit('show', this.$refs.caller);
}
}
};
</script>
Options
- align
string
left
( default )center
right
- embed
boolean
default: false
the drop down panel embedded in page/component - right-click
boolean
default: false
mouse right button click to call dropdown - animated
boolean|string
default: true - re-open
boolean
default: false
the dropdown whether re-open when it's has been opened and dropdown caller click again - width
number
specified number to set width - x
number
mouse right click x axis, work onright-click
set totrue
- y
number
mouse right click y axis, work onright-click
set totrue
Events
<template>
<button type='button' ref='caller'></button>
<v-dropdown ref='drop' @show-change="showChange">content</v-dropdown>
</template>
<script>
export default {
methods: {
showChange(val){
console.log(val);//true for shown, false for hidden
}
}
};
</script>
- show-change the dropdown layer container show state
arguments- val(boolean) -
true
for shown,false
for hidden
- val(boolean) -
API
<template>
<button type='button' ref='caller' @click="click"></button>
<v-dropdown ref='drop'>content</v-dropdown>
</template>
<script>
export default {
methods: {
click(){
this.$refs.drop.$emit('api-name', args);
}
}
};
</script>
- show open the drop down layer
this.$refs.drop.$emit('show', this.$refs.caller)
arguments- caller(HTMLDOMELEMENT) - open the caller of the drop down, the drop down layer will align to caller
- adjust adjust drop down layer positiion, make it align to caller
this.$refs.drop.$emit('adjust')
arguments- caller(HTMLDOMELEMENT) - open the caller of the drop down, the drop down layer will align to caller