adtec-core-package 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.en.md +36 -36
  2. package/package.json +59 -59
  3. package/src/api/BasicApi.ts +17 -17
  4. package/src/api/DocumentApi.ts +27 -27
  5. package/src/api/SysDictCacheApi.ts +26 -26
  6. package/src/api/SysUserApi.ts +35 -35
  7. package/src/api/framework.ts +12 -12
  8. package/src/assets/style/ant.scss +19 -19
  9. package/src/assets/style/index.less +180 -180
  10. package/src/components/ElFlex/ElFlex.vue +297 -297
  11. package/src/components/OperationAuth/operationAuth.vue +26 -26
  12. package/src/components/Search/ElIconSearch.vue +260 -260
  13. package/src/components/Search/ElSearch.vue +154 -154
  14. package/src/components/Table/ElTableColumnEdit.vue +218 -218
  15. package/src/components/Title/ElTitle.vue +49 -49
  16. package/src/components/autoToolTip/ElAutoToolTip.vue +61 -61
  17. package/src/components/baseEcharts/index.vue +48 -48
  18. package/src/components/business/userSelect.vue +412 -412
  19. package/src/components/upload/ElUploads.vue +9 -2
  20. package/src/components/upload/FileView.vue +158 -158
  21. package/src/components/upload/FileViewComponents.vue +57 -57
  22. package/src/config/ElementPlusConfig.ts +95 -95
  23. package/src/css/elementUI/autocomplete.scss +89 -89
  24. package/src/css/elementUI/common/var.scss +1549 -1549
  25. package/src/css/elementUI/date-picker/picker.scss +219 -219
  26. package/src/css/elementUI/drawer.scss +164 -164
  27. package/src/css/elementUI/table.scss +694 -694
  28. package/src/css/elementUI/tabs.scss +659 -659
  29. package/src/directives/vKeydown.ts +93 -93
  30. package/src/hooks/useDictHooks.ts +79 -76
  31. package/src/hooks/useEcharts.ts +58 -58
  32. package/src/hooks/useFileView.ts +34 -34
  33. package/src/hooks/useMessageHooks.ts +132 -132
  34. package/src/hooks/useResetRefHooks.ts +18 -18
  35. package/src/interface/BaseEntity.ts +28 -28
  36. package/src/interface/IMdmDept.ts +82 -82
  37. package/src/interface/IOrgDeptInfo.ts +12 -12
  38. package/src/interface/ISysDictDataCacheVo.ts +46 -46
  39. package/src/interface/ISysDictType.ts +37 -37
  40. package/src/interface/ISysMenuDataVo.ts +22 -22
  41. package/src/interface/ISysMenuInfoVo.ts +83 -83
  42. package/src/interface/ISysMenuOperationVo.ts +21 -21
  43. package/src/interface/ISysUploadFiles.ts +16 -16
  44. package/src/interface/ISysUserInfo.ts +70 -70
  45. package/src/interface/IUserPermissionVo.ts +34 -34
  46. package/src/interface/Message.ts +69 -69
  47. package/src/interface/PageData.ts +17 -17
  48. package/src/interface/ResponseData.ts +16 -16
  49. package/src/interface/dictMapType.ts +11 -11
  50. package/src/interface/enum/MessageEnum.ts +41 -41
  51. package/src/mixin/globalMixin.ts +37 -37
  52. package/src/packages/index.ts +18 -18
  53. package/src/packages/text.vue +13 -13
  54. package/src/plugins/echartsConfig.ts +73 -73
  55. package/src/plugins/plugins.ts +12 -12
  56. package/src/stores/dictStore.ts +27 -20
  57. package/src/stores/messageStore.ts +49 -49
  58. package/src/stores/permissionStore.ts +108 -108
  59. package/src/stores/storeConfig.ts +23 -23
  60. package/src/stores/userInfoStore.ts +31 -31
  61. package/src/utils/AxiosConfig.ts +216 -216
@@ -1,218 +1,218 @@
1
- <!--创建人 丁盼-->
2
- <!--说明: ElTableColumnTable-->
3
- <!--创建时间: 2024/11/27 上午11:56-->
4
- <!--修改时间: 2024/11/27 上午11:56-->
5
- <template>
6
- <div
7
- @click.stop.prevent="displayClick"
8
- style="width: 100%; min-height: 35px"
9
- ref="ref_divView"
10
- :id="guid"
11
- :class="getClass"
12
- tabindex="0"
13
- >
14
- <FocusLock v-if="display" :no-focus-guards="false" class="foucs-lock">
15
- <slot name="edit" v-if="display" tabindex="9"></slot>
16
- </FocusLock>
17
- <slot v-else name="view"></slot>
18
- </div>
19
- </template>
20
- <script setup lang="ts">
21
- import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
22
- import {
23
- useActiveElement,
24
- useEventBus,
25
- useFocus,
26
- watchPausable,
27
- } from '@vueuse/core'
28
- import FocusLock from 'vue-focus-lock'
29
- const ref_divView = ref()
30
- import { v4 as uuidv4 } from 'uuid'
31
- // const { focused } = useFocusWithin(ref_divView)
32
- const { focused: paragraphFocus } = useFocus(ref_divView)
33
- const display = ref(false)
34
- const guid = uuidv4()
35
- const bus = useEventBus<string>('elTableColumnEdit')
36
- const bus1 = useEventBus<string>(guid)
37
- // const props = defineProps<{
38
- // tableRef: any
39
- // }>()
40
- const activeElement = useActiveElement()
41
- watch(activeElement, (el: any) => {
42
- // //判断当前点击元素是否在表格范围内
43
- if (props.isEdit) {
44
- let el1: any = el
45
- let b = true
46
- let c = false
47
- let f = true
48
- while (b) {
49
- if (el1.className?.indexOf('el-table') > -1) {
50
- c = true
51
- b = false
52
- } else if (el1.className?.indexOf('el-popper') > -1) {
53
- b = false
54
- f = false
55
- } else {
56
- el1 = el1.parentNode
57
- if (el1 === null) {
58
- b = false
59
- }
60
- }
61
- }
62
- if (f) {
63
- if (!c) {
64
- paragraphFocus.value = false
65
- display.value = false
66
- } else {
67
- //判断当前点击元素ID 是否是当前组件ID
68
- let el2: any = el
69
- let d = true
70
- let e = false
71
- while (d) {
72
- if (el2.id === guid) {
73
- d = false
74
- e = true
75
- } else {
76
- el2 = el2.parentNode
77
- if (el2 === null) {
78
- d = false
79
- }
80
- }
81
- }
82
- if (e) {
83
- display.value = true
84
- } else {
85
- display.value = false
86
- }
87
- }
88
- }
89
- }
90
- })
91
- const instance = getCurrentInstance()
92
- const table = ref()
93
- const showOverflowTooltip = ref(false)
94
- const oldValue = ref()
95
- const props = withDefaults(
96
- defineProps<{
97
- scope?: any
98
- /**
99
- * @type boolean
100
- * @default ''
101
- * @description 设置是否记录编辑状态,默认为false
102
- */
103
- enableEditingStatus?: boolean
104
- isEdit?: boolean
105
- }>(),
106
- {
107
- /**
108
- * @type string
109
- * @default ''
110
- * @description 设置是否记录编辑状态,默认为falseenableEditingStatus
111
- */
112
- enableEditingStatus: false,
113
- isEdit: true,
114
- },
115
- )
116
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
117
- const { stop, pause, resume } = watchPausable(
118
- () => props.scope?.row[props.scope.column.property],
119
- (v) => {
120
- let val
121
- if (oldValue.value === undefined || oldValue.value === null) {
122
- val = ''
123
- } else {
124
- val = oldValue.value + ''
125
- }
126
- if (v + '' !== val) {
127
- if (!props.scope.row.isRowEditArr) {
128
- // eslint-disable-next-line vue/no-mutating-props
129
- props.scope.row.isRowEditArr = []
130
- }
131
- if (props.scope.row.isRowEditArr.indexOf(props.scope.column.property) === -1) {
132
- // eslint-disable-next-line vue/no-mutating-props
133
- props.scope.row.isRowEditArr.push(props.scope.column.property)
134
- }
135
- } else {
136
- if (props.scope.row.isRowEditArr) {
137
- // eslint-disable-next-line vue/no-mutating-props
138
- props.scope.row.isRowEditArr.splice(
139
- props.scope.row.isRowEditArr.indexOf(props.scope.column.property),
140
- 1,
141
- )
142
- }
143
- }
144
- if (props.scope.row.isRowEditArr && props.scope.row.isRowEditArr.length > 0) {
145
- // eslint-disable-next-line vue/no-mutating-props
146
- props.scope.row.isRowEdit = true
147
- } else {
148
- // eslint-disable-next-line vue/no-mutating-props
149
- props.scope.row.isRowEdit = false
150
- }
151
- },
152
- )
153
-
154
- onMounted(() => {
155
- if (props.enableEditingStatus) {
156
- resume()
157
- } else {
158
- stop()
159
- }
160
- if (props.scope) {
161
- oldValue.value = props.scope.row[props.scope.column.property]
162
- }
163
- let b = true
164
- let instance1: any = instance
165
- while (b) {
166
- if (instance1?.type?.name === 'ElTable' || instance1?.type?.__name === 'ElTable') {
167
- b = false
168
- } else {
169
- instance1 = instance1?.parent
170
- if (instance1 === null) {
171
- b = false
172
- }
173
- }
174
- }
175
- table.value = instance1
176
- showOverflowTooltip.value = table.value?.props?.showOverflowTooltip
177
- })
178
- onUnmounted(() => {
179
- bus.off(listener)
180
- bus1.off(listener)
181
- })
182
- const getClass = computed(() => {
183
- let className = showOverflowTooltip.value ? 'showOverflowTooltip' : ''
184
- if (props.isEdit) {
185
- return (className += ' el-table-column-edit')
186
- } else {
187
- return (className += ' el-table-column-view')
188
- }
189
- })
190
- function listener() {
191
- display.value = false
192
- bus.off(listener)
193
- bus1.off(listener)
194
- }
195
- const displayClick = () => {
196
- if (props.isEdit) {
197
- bus.emit()
198
- display.value = true
199
- bus.on(listener)
200
- bus1.on(listener)
201
- }
202
- }
203
- </script>
204
- <style scoped lang="scss">
205
- .showOverflowTooltip {
206
- white-space: nowrap;
207
- overflow: hidden;
208
- text-overflow: ellipsis;
209
- }
210
- .foucs-lock {
211
- :deep {
212
- div[data-lock=''] {
213
- display: flex;
214
- margin-top: 1.5px;
215
- }
216
- }
217
- }
218
- </style>
1
+ <!--创建人 丁盼-->
2
+ <!--说明: ElTableColumnTable-->
3
+ <!--创建时间: 2024/11/27 上午11:56-->
4
+ <!--修改时间: 2024/11/27 上午11:56-->
5
+ <template>
6
+ <div
7
+ @click.stop.prevent="displayClick"
8
+ style="width: 100%; min-height: 35px"
9
+ ref="ref_divView"
10
+ :id="guid"
11
+ :class="getClass"
12
+ tabindex="0"
13
+ >
14
+ <FocusLock v-if="display" :no-focus-guards="false" class="foucs-lock">
15
+ <slot name="edit" v-if="display" tabindex="9"></slot>
16
+ </FocusLock>
17
+ <slot v-else name="view"></slot>
18
+ </div>
19
+ </template>
20
+ <script setup lang="ts">
21
+ import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
22
+ import {
23
+ useActiveElement,
24
+ useEventBus,
25
+ useFocus,
26
+ watchPausable,
27
+ } from '@vueuse/core'
28
+ import FocusLock from 'vue-focus-lock'
29
+ const ref_divView = ref()
30
+ import { v4 as uuidv4 } from 'uuid'
31
+ // const { focused } = useFocusWithin(ref_divView)
32
+ const { focused: paragraphFocus } = useFocus(ref_divView)
33
+ const display = ref(false)
34
+ const guid = uuidv4()
35
+ const bus = useEventBus<string>('elTableColumnEdit')
36
+ const bus1 = useEventBus<string>(guid)
37
+ // const props = defineProps<{
38
+ // tableRef: any
39
+ // }>()
40
+ const activeElement = useActiveElement()
41
+ watch(activeElement, (el: any) => {
42
+ // //判断当前点击元素是否在表格范围内
43
+ if (props.isEdit) {
44
+ let el1: any = el
45
+ let b = true
46
+ let c = false
47
+ let f = true
48
+ while (b) {
49
+ if (el1.className?.indexOf('el-table') > -1) {
50
+ c = true
51
+ b = false
52
+ } else if (el1.className?.indexOf('el-popper') > -1) {
53
+ b = false
54
+ f = false
55
+ } else {
56
+ el1 = el1.parentNode
57
+ if (el1 === null) {
58
+ b = false
59
+ }
60
+ }
61
+ }
62
+ if (f) {
63
+ if (!c) {
64
+ paragraphFocus.value = false
65
+ display.value = false
66
+ } else {
67
+ //判断当前点击元素ID 是否是当前组件ID
68
+ let el2: any = el
69
+ let d = true
70
+ let e = false
71
+ while (d) {
72
+ if (el2.id === guid) {
73
+ d = false
74
+ e = true
75
+ } else {
76
+ el2 = el2.parentNode
77
+ if (el2 === null) {
78
+ d = false
79
+ }
80
+ }
81
+ }
82
+ if (e) {
83
+ display.value = true
84
+ } else {
85
+ display.value = false
86
+ }
87
+ }
88
+ }
89
+ }
90
+ })
91
+ const instance = getCurrentInstance()
92
+ const table = ref()
93
+ const showOverflowTooltip = ref(false)
94
+ const oldValue = ref()
95
+ const props = withDefaults(
96
+ defineProps<{
97
+ scope?: any
98
+ /**
99
+ * @type boolean
100
+ * @default ''
101
+ * @description 设置是否记录编辑状态,默认为false
102
+ */
103
+ enableEditingStatus?: boolean
104
+ isEdit?: boolean
105
+ }>(),
106
+ {
107
+ /**
108
+ * @type string
109
+ * @default ''
110
+ * @description 设置是否记录编辑状态,默认为falseenableEditingStatus
111
+ */
112
+ enableEditingStatus: false,
113
+ isEdit: true,
114
+ },
115
+ )
116
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
117
+ const { stop, pause, resume } = watchPausable(
118
+ () => props.scope?.row[props.scope.column.property],
119
+ (v) => {
120
+ let val
121
+ if (oldValue.value === undefined || oldValue.value === null) {
122
+ val = ''
123
+ } else {
124
+ val = oldValue.value + ''
125
+ }
126
+ if (v + '' !== val) {
127
+ if (!props.scope.row.isRowEditArr) {
128
+ // eslint-disable-next-line vue/no-mutating-props
129
+ props.scope.row.isRowEditArr = []
130
+ }
131
+ if (props.scope.row.isRowEditArr.indexOf(props.scope.column.property) === -1) {
132
+ // eslint-disable-next-line vue/no-mutating-props
133
+ props.scope.row.isRowEditArr.push(props.scope.column.property)
134
+ }
135
+ } else {
136
+ if (props.scope.row.isRowEditArr) {
137
+ // eslint-disable-next-line vue/no-mutating-props
138
+ props.scope.row.isRowEditArr.splice(
139
+ props.scope.row.isRowEditArr.indexOf(props.scope.column.property),
140
+ 1,
141
+ )
142
+ }
143
+ }
144
+ if (props.scope.row.isRowEditArr && props.scope.row.isRowEditArr.length > 0) {
145
+ // eslint-disable-next-line vue/no-mutating-props
146
+ props.scope.row.isRowEdit = true
147
+ } else {
148
+ // eslint-disable-next-line vue/no-mutating-props
149
+ props.scope.row.isRowEdit = false
150
+ }
151
+ },
152
+ )
153
+
154
+ onMounted(() => {
155
+ if (props.enableEditingStatus) {
156
+ resume()
157
+ } else {
158
+ stop()
159
+ }
160
+ if (props.scope) {
161
+ oldValue.value = props.scope.row[props.scope.column.property]
162
+ }
163
+ let b = true
164
+ let instance1: any = instance
165
+ while (b) {
166
+ if (instance1?.type?.name === 'ElTable' || instance1?.type?.__name === 'ElTable') {
167
+ b = false
168
+ } else {
169
+ instance1 = instance1?.parent
170
+ if (instance1 === null) {
171
+ b = false
172
+ }
173
+ }
174
+ }
175
+ table.value = instance1
176
+ showOverflowTooltip.value = table.value?.props?.showOverflowTooltip
177
+ })
178
+ onUnmounted(() => {
179
+ bus.off(listener)
180
+ bus1.off(listener)
181
+ })
182
+ const getClass = computed(() => {
183
+ let className = showOverflowTooltip.value ? 'showOverflowTooltip' : ''
184
+ if (props.isEdit) {
185
+ return (className += ' el-table-column-edit')
186
+ } else {
187
+ return (className += ' el-table-column-view')
188
+ }
189
+ })
190
+ function listener() {
191
+ display.value = false
192
+ bus.off(listener)
193
+ bus1.off(listener)
194
+ }
195
+ const displayClick = () => {
196
+ if (props.isEdit) {
197
+ bus.emit()
198
+ display.value = true
199
+ bus.on(listener)
200
+ bus1.on(listener)
201
+ }
202
+ }
203
+ </script>
204
+ <style scoped lang="scss">
205
+ .showOverflowTooltip {
206
+ white-space: nowrap;
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ }
210
+ .foucs-lock {
211
+ :deep {
212
+ div[data-lock=''] {
213
+ display: flex;
214
+ margin-top: 1.5px;
215
+ }
216
+ }
217
+ }
218
+ </style>
@@ -1,49 +1,49 @@
1
- <!--创建人 丁盼-->
2
- <!--说明: ElTitle-->
3
- <!--创建时间: 2024/10/26 下午7:08-->
4
- <!--修改时间: 2024/10/26 下午7:08-->
5
- <template>
6
- <el-flex align="center" height="44px" style="background: #ffffff">
7
- <el-flex align="center">
8
- <template v-if="level + '' === '0'">
9
- <el-icons
10
- model-value="adtec-titletag"
11
- style="color: var(--el-color-primary); font-size: 16px"
12
- ></el-icons>
13
- <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
14
- </template>
15
- <template v-if="level + '' === '1'">
16
- <el-icons
17
- model-value="adtec-contenttitle"
18
- style="color: var(--el-color-primary); font-size: 16px"
19
- ></el-icons>
20
- <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
21
- </template>
22
- <template v-if="level + '' === '2'">
23
- <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
24
- </template>
25
- </el-flex>
26
- <slot></slot>
27
- </el-flex>
28
- </template>
29
- <script setup lang="ts">
30
- import ElIcons from '../icon/ElIcons.vue'
31
- import ElFlex from '../ElFlex/ElFlex.vue'
32
-
33
- defineProps({
34
- /**
35
- * @type string
36
- * @default ''
37
- * @description 提示文字
38
- */
39
- title: {
40
- type: String,
41
- default: '标题',
42
- },
43
- level: {
44
- type: String,
45
- default: '0',
46
- },
47
- })
48
- </script>
49
- <style scoped lang="scss"></style>
1
+ <!--创建人 丁盼-->
2
+ <!--说明: ElTitle-->
3
+ <!--创建时间: 2024/10/26 下午7:08-->
4
+ <!--修改时间: 2024/10/26 下午7:08-->
5
+ <template>
6
+ <el-flex align="center" height="44px" style="background: #ffffff">
7
+ <el-flex align="center">
8
+ <template v-if="level + '' === '0'">
9
+ <el-icons
10
+ model-value="adtec-titletag"
11
+ style="color: var(--el-color-primary); font-size: 16px"
12
+ ></el-icons>
13
+ <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
14
+ </template>
15
+ <template v-if="level + '' === '1'">
16
+ <el-icons
17
+ model-value="adtec-contenttitle"
18
+ style="color: var(--el-color-primary); font-size: 16px"
19
+ ></el-icons>
20
+ <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
21
+ </template>
22
+ <template v-if="level + '' === '2'">
23
+ <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
24
+ </template>
25
+ </el-flex>
26
+ <slot></slot>
27
+ </el-flex>
28
+ </template>
29
+ <script setup lang="ts">
30
+ import ElIcons from '../icon/ElIcons.vue'
31
+ import ElFlex from '../ElFlex/ElFlex.vue'
32
+
33
+ defineProps({
34
+ /**
35
+ * @type string
36
+ * @default ''
37
+ * @description 提示文字
38
+ */
39
+ title: {
40
+ type: String,
41
+ default: '标题',
42
+ },
43
+ level: {
44
+ type: String,
45
+ default: '0',
46
+ },
47
+ })
48
+ </script>
49
+ <style scoped lang="scss"></style>
@@ -1,61 +1,61 @@
1
- <!--创建人 胡啸东-->
2
- <!--说明: index-->
3
- <!--创建时间: 2024/12/17 下午3:27-->
4
- <!--修改时间: 2024/12/17 下午3:27-->
5
- <template>
6
- <el-tooltip
7
- effect="light"
8
- :content="props.tooltipContent ? props.tooltipContent : props.content"
9
- placement="top"
10
- :disabled="isShow"
11
- >
12
- <template #content>
13
- <!-- 此处的默认值先看tooltipContent有没有,没有就给默认content -->
14
- <slot name="tooltipContent">{{
15
- props.tooltipContent ? props.tooltipContent : props.content
16
- }}</slot>
17
- </template>
18
- <div class="content" :style="{ width: props.width }" @mouseover="isShowTooltip">
19
- <span ref="contentRef">
20
- <!-- 给一个没有写插槽的默认值,兼容纯文本的情况 -->
21
- <slot name="content">{{ props.content }}</slot>
22
- </span>
23
- </div>
24
- </el-tooltip>
25
- </template>
26
- <script setup lang="ts">
27
- import { ref } from 'vue'
28
-
29
- // 定义props的类型
30
-
31
- interface Props {
32
- content: string
33
- width: string
34
- tooltipContent?: string
35
- }
36
- // 使用withDefaults来给props赋默认值
37
- const props = withDefaults(defineProps<Props>(), {
38
- content: '',
39
- width: '',
40
- tooltipContent: '',
41
- })
42
- // 使用isShow来控制tooltip是否显示
43
- let isShow = ref<boolean>(true)
44
- // 在span标签上定义一个ref
45
- const contentRef = ref()
46
- const isShowTooltip = function (): void {
47
- // 计算span标签的offsetWidth与盒子元素的offsetWidth,给isShow赋值
48
- if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
49
- isShow.value = true
50
- } else {
51
- isShow.value = false
52
- }
53
- }
54
- </script>
55
- <style scoped lang="scss">
56
- .content {
57
- overflow: hidden;
58
- white-space: nowrap;
59
- text-overflow: ellipsis;
60
- }
61
- </style>
1
+ <!--创建人 胡啸东-->
2
+ <!--说明: index-->
3
+ <!--创建时间: 2024/12/17 下午3:27-->
4
+ <!--修改时间: 2024/12/17 下午3:27-->
5
+ <template>
6
+ <el-tooltip
7
+ effect="light"
8
+ :content="props.tooltipContent ? props.tooltipContent : props.content"
9
+ placement="top"
10
+ :disabled="isShow"
11
+ >
12
+ <template #content>
13
+ <!-- 此处的默认值先看tooltipContent有没有,没有就给默认content -->
14
+ <slot name="tooltipContent">{{
15
+ props.tooltipContent ? props.tooltipContent : props.content
16
+ }}</slot>
17
+ </template>
18
+ <div class="content" :style="{ width: props.width }" @mouseover="isShowTooltip">
19
+ <span ref="contentRef">
20
+ <!-- 给一个没有写插槽的默认值,兼容纯文本的情况 -->
21
+ <slot name="content">{{ props.content }}</slot>
22
+ </span>
23
+ </div>
24
+ </el-tooltip>
25
+ </template>
26
+ <script setup lang="ts">
27
+ import { ref } from 'vue'
28
+
29
+ // 定义props的类型
30
+
31
+ interface Props {
32
+ content: string
33
+ width: string
34
+ tooltipContent?: string
35
+ }
36
+ // 使用withDefaults来给props赋默认值
37
+ const props = withDefaults(defineProps<Props>(), {
38
+ content: '',
39
+ width: '',
40
+ tooltipContent: '',
41
+ })
42
+ // 使用isShow来控制tooltip是否显示
43
+ let isShow = ref<boolean>(true)
44
+ // 在span标签上定义一个ref
45
+ const contentRef = ref()
46
+ const isShowTooltip = function (): void {
47
+ // 计算span标签的offsetWidth与盒子元素的offsetWidth,给isShow赋值
48
+ if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
49
+ isShow.value = true
50
+ } else {
51
+ isShow.value = false
52
+ }
53
+ }
54
+ </script>
55
+ <style scoped lang="scss">
56
+ .content {
57
+ overflow: hidden;
58
+ white-space: nowrap;
59
+ text-overflow: ellipsis;
60
+ }
61
+ </style>