97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template>
|
|
<template
|
|
v-if="
|
|
(itemData !== undefined && itemData?.to !== undefined && itemData?.to !== '') ||
|
|
routeTo !== undefined
|
|
">
|
|
<RouterLink
|
|
:to="goToRoute"
|
|
:class="[
|
|
itemData !== undefined && itemData.sub !== undefined && (itemData.showsub === undefined || itemData.showsub)
|
|
? 'menu-have-sub menu-sub-hover-d'
|
|
: ''
|
|
]">
|
|
<i
|
|
class="ico-c ico-menu-side"
|
|
v-if="
|
|
(itemData !== undefined &&
|
|
itemData?.ico !== undefined &&
|
|
itemData?.ico !== '') ||
|
|
icon !== undefined
|
|
">
|
|
<svg>
|
|
<use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
|
|
</svg>
|
|
</i>
|
|
<span>
|
|
{{
|
|
title !== undefined
|
|
? title
|
|
: itemData !== undefined && itemData.title !== undefined
|
|
? itemData.title
|
|
: ''
|
|
}}
|
|
</span>
|
|
</RouterLink>
|
|
</template>
|
|
<div
|
|
v-else
|
|
:class="[
|
|
(itemData !== undefined && itemData.sub !== undefined) ||
|
|
((clickable !== undefined && clickable) || (itemData?.clickable !== undefined && itemData?.clickable))
|
|
? 'menu-have-sub menu-sub-hover-d'
|
|
: ''
|
|
]"
|
|
@click="OnClick">
|
|
<i
|
|
class="ico-c ico-menu-side"
|
|
v-if="
|
|
(itemData !== undefined && itemData?.ico !== undefined && itemData?.ico !== '') ||
|
|
icon !== undefined
|
|
">
|
|
<svg>
|
|
<use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
|
|
</svg>
|
|
</i>
|
|
<span>
|
|
{{
|
|
title !== undefined
|
|
? title
|
|
: itemData !== undefined && itemData.title !== undefined
|
|
? itemData.title
|
|
: ''
|
|
}}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import icourl from '@/assets/images/icons.svg'
|
|
|
|
interface NavItemObj {
|
|
[key: string]: any
|
|
title?: string
|
|
ico?: string
|
|
to?: string
|
|
clickable?: boolean
|
|
}
|
|
|
|
const props = defineProps<{
|
|
itemData?: NavItemObj
|
|
icon?: string
|
|
title?: string
|
|
routeTo?: string
|
|
clickable?: boolean
|
|
}>()
|
|
|
|
const goToRoute = computed<any>(() => {
|
|
return props.routeTo !== undefined ? props.routeTo : props.itemData?.to
|
|
})
|
|
|
|
const emit = defineEmits(['click'])
|
|
|
|
const OnClick = (e: Event) => {
|
|
emit('click', props.itemData)
|
|
}
|
|
</script>
|