You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.3 KiB
Plaintext
96 lines
2.3 KiB
Plaintext
11 months ago
|
<script lang="tsx">
|
||
|
|
import {
|
||
|
|
DownOutlined,
|
||
|
|
FullscreenExitOutlined,
|
||
|
|
FullscreenOutlined,
|
||
|
|
RedoOutlined,
|
||
|
|
} from '@ant-design/icons-vue'
|
||
|
|
import { Dropdown, Menu, MenuItem } from 'ant-design-vue'
|
||
|
|
import { defineComponent, ref } from 'vue'
|
||
|
|
import { useRoute, useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'header-tabs',
|
||
|
|
setup() {
|
||
|
|
const closeCurrent = () => {}
|
||
|
|
const closeAll = () => {}
|
||
|
|
const reloadCurrent = () => {}
|
||
|
|
const route = useRoute()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const isFullscreen = ref(false)
|
||
|
|
console.log(route, router)
|
||
|
|
return () => (
|
||
|
|
<div class="header-tabs">
|
||
|
|
<div class="tabs-content"></div>
|
||
|
|
<div class="affix flex-row-center">
|
||
|
|
<div class="dropdown-trigger flex-row-center">
|
||
|
|
<RedoOutlined title="重新加载" />
|
||
|
|
</div>
|
||
|
|
<Dropdown
|
||
|
|
trigger={['click']}
|
||
|
|
v-slots={{
|
||
|
|
overlay: () => (
|
||
|
|
<Menu>
|
||
|
|
<MenuItem key="logout" onClick={reloadCurrent}>
|
||
|
|
重新加载
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem key="logout" onClick={closeCurrent}>
|
||
|
|
关闭当前
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem key="logout" onClick={closeAll}>
|
||
|
|
关闭所有
|
||
|
|
</MenuItem>
|
||
|
|
</Menu>
|
||
|
|
)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div class="dropdown-trigger flex-row-center">
|
||
|
|
<DownOutlined />
|
||
|
|
</div>
|
||
|
|
</Dropdown>
|
||
|
|
<div class="dropdown-trigger flex-row-center">
|
||
|
|
{isFullscreen.value ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.flex-row-center {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.header-tabs {
|
||
|
|
height: 32px;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-color: white;
|
||
|
|
border-top: 1px solid #eeeeee;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.affix {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.dropdown-trigger {
|
||
|
|
cursor: pointer;
|
||
|
|
height: 100%;
|
||
|
|
width: 40px;
|
||
|
|
border-left: 1px solid #eeeeee;
|
||
|
|
&:deep(span) {
|
||
|
|
color: #999;
|
||
|
|
&:hover {
|
||
|
|
color: #111;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|