You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.1 KiB
55 lines
1.1 KiB
<template> |
|
<li class="dropdown nav-item" |
|
:is="tag" |
|
:class="{show: isOpen}" |
|
aria-haspopup="true" |
|
:aria-expanded="isOpen" |
|
@click="toggleDropDown" |
|
v-click-outside="closeDropDown"> |
|
|
|
<a class="nav-link dropdown-toggle" |
|
data-toggle="dropdown"> |
|
<slot name="title"> |
|
<i :class="icon"></i> |
|
<span class="no-icon">{{title}}</span> |
|
<b class="caret"></b> |
|
</slot> |
|
</a> |
|
<div class="dropdown-menu" v-show="isOpen"> |
|
<slot></slot> |
|
</div> |
|
</li> |
|
</template> |
|
<script> |
|
export default { |
|
name: 'drop-down', |
|
props: { |
|
title: String, |
|
icon: String, |
|
tag: { |
|
type: String, |
|
default: 'li' |
|
} |
|
}, |
|
data () { |
|
return { |
|
isOpen: false |
|
} |
|
}, |
|
methods: { |
|
toggleDropDown () { |
|
this.isOpen = !this.isOpen |
|
this.$emit('change', this.isOpen) |
|
}, |
|
closeDropDown () { |
|
this.isOpen = false |
|
this.$emit('change', this.isOpen) |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
.dropdown .dropdown-toggle{ |
|
cursor: pointer; |
|
} |
|
</style>
|
|
|