1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { defineComponent, ref, watch } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import './tab-page-exp.scss';
interface RouteMsg {
key: string;
fullPath: string;
modelPath?: string;
caption?: string;
}
interface dropdownAction {
text: string;
value?: string;
}
export const TabPageExp = defineComponent({
name: 'TabPageExp',
props: {
routeMsgs: {
type: Array<RouteMsg>,
required: true,
},
currentKey: {
type: String,
required: true,
},
},
emits: ['tab-delete', 'tab-click', 'close-all', 'close-other'],
setup(props, { emit }) {
const ns = useNamespace('tab-page-exp');
const tabsValue = ref('0');
const actions: dropdownAction[] = [
{ text: '关闭所有', value: 'closeAll' },
{ text: '关闭其他', value: 'closeOther' },
];
// 监听currentVal确认当前激活tab
watch(
() => props.currentKey,
(newVal, _oldVal) => {
const currentRouteMsgIndex = props.routeMsgs.findIndex(
(msg: RouteMsg) => msg.key === newVal,
);
if (currentRouteMsgIndex !== -1) {
tabsValue.value = `${currentRouteMsgIndex}`;
}
},
);
// 点击tab
const changePage = (name: string) => {
tabsValue.value = name;
emit('tab-click', +name);
};
// 关闭tab
const onClose = (name: string) => {
emit('tab-delete', +name);
};
// 处理下拉点击
const handleCommand = (command: string) => {
if (command === 'closeAll') {
emit('close-all');
} else if (command === 'closeOther') {
emit('close-other');
}
};
return { ns, tabsValue, actions, changePage, onClose, handleCommand };
},
render() {
return (
<div class={this.ns.b()}>
<div class={this.ns.e('left')}>
<i-tabs
type='card'
v-model={this.tabsValue}
closable
on-on-click={this.changePage}
on-on-tab-remove={this.onClose}
>
{this.routeMsgs?.map((msg: RouteMsg, index: number) => {
return (
<i-tab-pane
key={msg.key}
name={`${index}`}
label={msg.caption}
></i-tab-pane>
);
})}
</i-tabs>
</div>
<div class={this.ns.e('right')}>
<i-dropdown
on-on-click={this.handleCommand}
scopedSlots={{
default: () => {
return (
<i-button size='small' type='primary'>
更多 <ion-icon name='arrow-down'></ion-icon>
</i-button>
);
},
list: () => {
return (
<i-dropdown-menu>
{this.actions.map((action: dropdownAction) => {
return (
<i-dropdown-item name={action.value}>
{action.text}
</i-dropdown-item>
);
})}
</i-dropdown-menu>
);
},
}}
></i-dropdown>
</div>
</div>
);
},
});