<template>
|
<div class="reuse-tab ad-rt fixed">
|
<a-tabs :activeKey="pos" :animated="false" type="line">
|
<a-tab-pane v-for="(i) of list" :key="i.path">
|
<template slot="tab">
|
<!--[reuse-tab-context-menu]="i" -->
|
<span @click="to($event, i)" class="name">{{i.title}}</span>
|
<i v-if="i.closable" class="anticon anticon-close op" @click="close($event, i, false)"></i>
|
</template>
|
<!--
|
<ng-template #titleTemplate>
|
<span [reuse-tab-context-menu]="i" (click)="to($event, index)" class="name">{{i.title}}</span>
|
<i *ngIf="i.closable" class="anticon anticon-close op" (click)="_close($event, index, false)"></i>
|
</ng-template>
|
-->
|
</a-tab-pane>
|
</a-tabs>
|
<!--
|
<reuse-tab-context [i18n]="i18n" (change)="cmChange($event)"></reuse-tab-context>
|
-->
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
Watch,
|
} from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
|
@Component({})
|
export default class ReuseTab extends Vue {
|
|
@Prop({
|
type: Array,
|
default() {
|
return [];
|
},
|
})
|
private list!: any[];
|
|
@Prop({
|
type: String,
|
default: '',
|
})
|
private pos!: string;
|
|
@Emit('changePath')
|
private to(event: any, index: any) {
|
|
}
|
|
private close(event: any, index: any, close: boolean) {
|
if (this.list.length === 1 ) {
|
this.$message.error('只有一个路由标签，不能删除');
|
return;
|
}
|
this.onCloseTab(event, index, close);
|
}
|
|
private created() {
|
}
|
@Emit('closeTab')
|
private onCloseTab(event: any, index: any, close: boolean) {
|
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
@import '../../assets/theme/styles/index.less';
|
|
@reuse-tab-prefix: ~'.reuse-tab';
|
@reuse-tab-height: 52px;
|
@reuse-tab-bg: #fff;
|
@reuse-tab-padding: 8px;
|
@reuse-tab-border-color: #d9d9d9;
|
|
@{reuse-tab-prefix} {
|
display: block;
|
background-color: @reuse-tab-bg;
|
padding: @reuse-tab-padding;
|
border-bottom: 1px solid @reuse-tab-border-color;
|
outline: none;
|
user-select: none;
|
|
.ant-tabs-bar {
|
margin-bottom: 0;
|
border-bottom: none;
|
}
|
|
.ant-tabs-nav .ant-tabs-tab {
|
padding: 0;
|
|
.name {
|
display: inline-block;
|
padding: 8px 20px;
|
}
|
|
.op {
|
display: none;
|
position: absolute;
|
top: 14px;
|
right: 2px;
|
margin: 0;
|
font-size: 12px;
|
}
|
|
&:hover {
|
.op {
|
display: block;
|
}
|
}
|
}
|
}
|
|
@{reuse-tab-prefix}__cm {
|
.ant-menu {
|
border: 1px solid #e9e9e9;
|
}
|
}
|
|
.ad-rt {
|
display: block;
|
background-color: #fff;
|
padding: 8px;
|
margin: 0 -24px 0 -24px;
|
border-bottom: 1px solid #d9d9d9;
|
outline: none;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
|
}
|
|
.ad-rt.fixed {
|
position: fixed;
|
top: 64px;
|
left: 200px;
|
right: 0;
|
margin: 0;
|
z-index: 10
|
}
|
|
.aside-collapsed {
|
.ad-rt.fixed {
|
position: fixed;
|
top: 64px;
|
left: 64px;
|
right: 0;
|
margin: 0;
|
z-index: 10
|
}
|
}
|
</style>
|
