| Current Path : /var/www/html/mswp/node_modules/vuesax/src/components/vsNavbar/Item/ |
| Current File : /var/www/html/mswp/node_modules/vuesax/src/components/vsNavbar/Item/vsNavbarItem.ts |
import { VNode } from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import VsComponent from '../../../mixins/component'
@Component
export default class VsNavbarItem extends VsComponent {
@Prop({ default: false, type: Boolean }) active: boolean
@Prop({}) to: string
@Prop({}) id: string
@Prop({}) href: string
@Prop({ default: '_blank' }) target: string
@Watch('active')
handleWatchActive() {
this.handleLine()
}
handleLine() {
this.$nextTick(() => {
if (this.active) {
const parent: any = this.$parent
const left = (this.$el as any).offsetLeft
parent.setLeftLine(left)
const width = (this.$el as any).scrollWidth
parent.setWidthLine(width)
}
})
}
handleClick() {
if (this.to) {
this.$router.push(this.to)
} else if (this.href) {
window.open(this.href, this.target)
}
}
handleActive() {
const parent: any = this.$parent
parent.setModel(this.id)
this.handleLine()
}
mounted() {
setTimeout(() => {
if (this.active) {
const el: any = this.$el
const parent: any = this.$parent
const left = el.offsetLeft
parent.setLeftLine(left)
const width = el.scrollWidth
parent.setWidthLine(width)
}
}, 150)
}
public render(h: any): VNode {
return h('button', {
staticClass: 'vs-navbar__item',
class: {
active: this.active
},
on: {
click: (evt: any) => {
this.$emit('click', evt)
this.handleLine()
this.handleClick()
this.handleActive()
}
}
}, this.$slots.default)
}
}