Amir Mohamadi
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<nuxt-link :to="link" tag="li" v-if="!hasChild">
|
|
<a>
|
|
<i :class="icon"></i>
|
|
<span>{{text}}</span>
|
|
<span class="badge" v-if="badge">{{badge}}</span>
|
|
</a>
|
|
</nuxt-link>
|
|
<li v-else>
|
|
<ul>
|
|
<li @click="toggle">
|
|
<a>
|
|
<i :class="icon"></i>
|
|
<span>{{text}}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="menu-group" :data-key="componentUniqueID">
|
|
<slot/>
|
|
</ul>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
componentUniqueID: null
|
|
}
|
|
},
|
|
props: {
|
|
link: {
|
|
required: false
|
|
},
|
|
icon: {
|
|
required: false
|
|
},
|
|
text: {
|
|
required: true
|
|
},
|
|
badge: {
|
|
required: false
|
|
},
|
|
hasChild: {
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.componentUniqueID = Math.random() * 100
|
|
$('.menu-group').slideUp()
|
|
},
|
|
methods: {
|
|
toggle(e) {
|
|
$(`.menu-group:not([data-key="${this.componentUniqueID}"])`).slideUp()
|
|
$(`.menu-group[data-key="${this.componentUniqueID}"]`).slideToggle()
|
|
}
|
|
}
|
|
}
|
|
</script>
|