<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-13 15:15:36
|
* @Description:
|
-->
|
<template>
|
<div class="menuTabs" :class="$route.path == '/dash/home' ? 'homeCardStyle' : 'cardCurrentStyle2'">
|
<el-tabs v-model="editableTabsValue" type="border-card"
|
:closable="routerHistory && routerHistory.length > 1" @tab-remove="removeTab"
|
@tab-click="clickTab">
|
<el-tab-pane v-for="(item) in routerHistory" :key="item.url" :name="item.url">
|
<span slot="label">
|
<i v-if="item.url === editableTabsValue" :class="['el-icon-refresh', {'loading': featching}]" @click="refreshList(item)"></i>
|
{{item.name || '-'}}
|
</span>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
name: 'MenuTabs',
|
props: ['featching'],
|
data() {
|
return {
|
editableTabsValue: ''
|
}
|
},
|
computed: {
|
...mapState(['routerHistory'])
|
},
|
methods: {
|
// 刷新列表
|
refreshList(item) {
|
this.$emit('refresh-list', item);
|
},
|
removeTab(val) {
|
this.$store.dispatch('removeRoute', val)
|
if (this.routerHistory.length === 1) {
|
this.$router.push({ path: this.routerHistory[0].url })
|
} else if (val === this.$route.path) {
|
this.$router.push({ path: this.routerHistory[this.routerHistory.length - 1].url })
|
}
|
},
|
clickTab(val) {
|
if (val.name === this.$route.path) return
|
this.$router.push({ path: val.name })
|
}
|
},
|
watch: {
|
$route: {
|
handler: function() {
|
this.editableTabsValue = this.$route.path
|
},
|
immediate: true
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.menuTabs {
|
margin: 20px 20px 0;
|
/deep/ .el-tabs__content {
|
display: none;
|
}
|
.el-tabs__nav-next,
|
.el-tabs__nav-prev {
|
font-size: 16px !important;
|
}
|
// 刷新旋转动画
|
@keyframes rotation{
|
from {transform: rotate(0deg);}
|
to {transform: rotate(360deg);}
|
}
|
.el-icon-refresh {
|
&:hover {
|
color: rgb(221, 46, 46);
|
font-weight: bolder;
|
}
|
&.loading {
|
animation: rotation 1s linear infinite;
|
}
|
}
|
}
|
</style>
|
