init

wangrong

2026-08-30 761e5c5fa871959f60e15c971c8d83f2b53d0af5

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
<template>
  <el-tabs
    class="fu-tabs"
    :before-leave="beforeLeave"
    :editable="false"
    :addable="false"
    v-bind="$attrs"
  >
    <el-tab-pane name="add" key="add" v-if="addable" :lazy="true">
      <template #label>
        <slot name="add">
          <!-- 下拉方式 -->
          <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
            <slot name="dropdownButton">
              <el-button type="primary" plain>
                <el-icon>
                  <component :is="addIcon" />
                </el-icon>
                <template v-if="addButtonLabel">{{ addButtonLabel }}</template>
              </el-button>
            </slot>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, i) in dropdownMenus"
                  :key="i"
                  :icon="item.icon"
                  :disabled="item.disabled"
                  :divided="item.divided"
                  :command="item.command"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- 默认 -->
          <el-button v-else @click="handleCommand" type="primary" plain>
            <el-icon>
              <component :is="addIcon" />
            </el-icon>
            <template v-if="addButtonLabel">{{ addButtonLabel }}</template>
          </el-button>
        </slot>
      </template>
    </el-tab-pane>
    <slot />
  </el-tabs>
</template>
 
<script lang="ts" setup>
import { PropType } from 'vue'
import { DropdownProps } from '@/custom-component/de-tabs/types'
import generateID from '@/utils/generateID'
defineOptions({ name: 'FuTabs' })
type TabPanelName = string | number
const props = defineProps({
  addType: {
    type: String,
    default: 'default',
    validator: (val: string) => ['default', 'dropdown'].includes(val)
  },
  dropdownMenus: {
    type: Array as PropType<DropdownProps[]>,
    default: () => []
  },
  addTrigger: {
    type: String,
    default: 'hover',
    validator: (val: string) => ['hover', 'click'].includes(val)
  },
  addIcon: {
    type: String,
    default: 'Plus'
  },
  addButtonLabel: String,
  addable: Boolean
})
const emit = defineEmits(['command'])
 
function handleCommand(e: any) {
  const name = generateID()
  let obj = null
  if (e) {
    obj = props.dropdownMenus.find((item: any) => item.command === e)
  }
  emit('command', name, obj)
}
 
/* 活动标签切换时触发 */
function beforeLeave(currentName: TabPanelName) {
  // 如果name是add，则什么都不触发
  if (currentName === 'add') {
    return false
  }
}
</script>