解释一下列ts语句的语法,纯文本输出.<!
-- sy1\src\layout\components\Sidebar\SidebarItem.
vue -->
<template>
<div>
<!
-- <div
v
-if=" !item.meta || !item.meta.hidden "
:class="['menu
-wrapper', isCollapse ? 'simple
-mode' : 'full
-mode', {'first
-level': isFirstLevel}]"
>
-->
<div
v
-if="!item.meta || !item.meta.hidden"
:class="['menu
-wrapper', 'full
-mode', { 'first
-level': isFirstLevel }]"
>
<template v
-if="theOnlyOneChild && !theOnlyOneChild.children">
<sidebar
-item
-link
v
-if="theOnlyOneChild.meta"
:to="resolvePath(theOnlyOneChild.path)"
>
<el
-menu
-item
:index="resolvePath(theOnlyOneChild.path)"
:class="{ 'submenu
-title
-noDropdown': isFirstLevel }"
>
<!
-- <i v
-if="theOnlyOneChild.meta.title==='工作台'" class="iconfont icon img
-icon
-sel" />
-->
<!
-- <svg
-icon v
-if="theOnlyOneChild.meta.title==='工作台'" name="dashboard" width="20" height="20"></svg
-icon>
-->
<i
v
-if="theOnlyOneChild.meta.icon"
class="iconfont"
:class="theOnlyOneChild.meta.icon"
/>
<span v
-if="theOnlyOneChild.meta.title" slot="title">{{
theOnlyOneChild.meta.title
}}</span>
</el
-menu
-item>
</sidebar
-item
-link>
</template>
<el
-submenu v
-else :index="resolvePath(item.path)" popper
-append
-to
-body>
<template slot="title">
<i
v
-if="item.meta && item.meta.icon"
class="iconfont"
:class="item.meta.icon"
/>
<span v
-if="item.meta && item.meta.title" slot="title">{{
item.meta.title
}}</span>
</template>
<template v
-if="item.children">
<sidebar
-item
v
-for="child in item.children"
:key="child.path"
:item="child"
:is
-collapse="isCollapse"
:is
-first
-level="false"
:base
-path="resolvePath(child.path)"
class="nest
-menu"
/>
</template>
</el
-submenu>
</div>
</div>
</template>
<script lang="ts">
import path from 'path'
import { Component, Prop,
Vue } from '
vue-property
-decorator'
import { UserModule } from '@/store/modules/user'
import { Route, RouteConfig } from '
vue-router'
import { isExternal } from '@/utils/validate'
import SidebarItemLink from './SidebarItemLink.
vue'
@Component({
name: 'SidebarItem',
components: {
SidebarItemLink,
},
})
export default class extends
Vue {
@Prop({ required: true }) private item!: RouteConfig
@Prop({ default: false }) private isCollapse!: boolean
@Prop({ default: true }) private isFirstLevel!: boolean
@Prop({ default: '' }) private basePath!: string
get showingChildNumber() {
if (this.item.children) {
const showingChildren = this.item.children.filter((item) => {
if (item.meta && item.meta.hidden) {
return false
}
return true
})
return showingChildren.length
}
return 0
}
get roles() {
return UserModule.roles
}
get theOnlyOneChild() {
if (this.showingChildNumber > 0) {
return null
}
if (this.item.children) {
for (let child of this.item.children) {
if (!child.meta || !child.meta.hidden) {
return child
}
}
}
//
If there is no children, return itself with path removed,
// because this.basePath already conatins item's path information
return { ...this.item, path: '' }
}
private resolvePath(routePath: string) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
</script>
本文探讨了在Vue.js中使用v-if指令结合Date.parse方法来判断当前时间是否晚于给定的开始时间。通过这一技巧可以实现在指定日期之前隐藏某些元素的逻辑。
扫一扫
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
