From 8c5858e2c5d42db1de37d5290ea2ca784f4d4612 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sat, 6 Jan 2024 15:38:53 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=AD=97=E6=AE=B5=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/table/index.mock.ts | 17 +++++-- src/components/Table/src/Table.vue | 49 +++++++++++-------- src/utils/is.ts | 3 -- .../Components/Table/TableImagePreview.vue | 7 ++- .../Components/Table/TableVideoPreview.vue | 2 +- 5 files changed, 47 insertions(+), 31 deletions(-) diff --git a/mock/table/index.mock.ts b/mock/table/index.mock.ts index 80520b800..a83ed140e 100644 --- a/mock/table/index.mock.ts +++ b/mock/table/index.mock.ts @@ -66,6 +66,7 @@ for (let i = 0; i < count; i++) { importance: '@integer(1, 3)', display_time: '@datetime', pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'), children: [ { id: toAnyString(), @@ -76,6 +77,7 @@ for (let i = 0; i < count; i++) { importance: '@integer(1, 3)', display_time: '@datetime', pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'), children: [ { id: toAnyString(), @@ -85,7 +87,8 @@ for (let i = 0; i < count; i++) { content: baseContent, importance: '@integer(1, 3)', display_time: '@datetime', - pageviews: '@integer(300, 5000)' + pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)') }, { id: toAnyString(), @@ -95,7 +98,8 @@ for (let i = 0; i < count; i++) { content: baseContent, importance: '@integer(1, 3)', display_time: '@datetime', - pageviews: '@integer(300, 5000)' + pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)') } ] }, @@ -107,7 +111,8 @@ for (let i = 0; i < count; i++) { content: baseContent, importance: '@integer(1, 3)', display_time: '@datetime', - pageviews: '@integer(300, 5000)' + pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)') }, { id: toAnyString(), @@ -117,7 +122,8 @@ for (let i = 0; i < count; i++) { content: baseContent, importance: '@integer(1, 3)', display_time: '@datetime', - pageviews: '@integer(300, 5000)' + pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)') }, { id: toAnyString(), @@ -127,7 +133,8 @@ for (let i = 0; i < count; i++) { content: baseContent, importance: '@integer(1, 3)', display_time: '@datetime', - pageviews: '@integer(300, 5000)' + pageviews: '@integer(300, 5000)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)') } ] // image_uri diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue index 6c1c85a8b..ca7a9d454 100644 --- a/src/components/Table/src/Table.vue +++ b/src/components/Table/src/Table.vue @@ -17,7 +17,6 @@ import { set, get } from 'lodash-es' import { CSSProperties } from 'vue' import { getSlot } from '@/utils/tsxHelper' import TableActions from './components/TableActions.vue' -import { isImgPath } from '@/utils/is' import { createVideoViewer } from '@/components/VideoPlayer' import { Icon } from '@/components/Icon' import { BaseButton } from '@/components/Button' @@ -59,8 +58,13 @@ export default defineComponent({ type: Array as PropType, default: () => [] }, - // 是否自动预览 - preview: { + // 图片自动预览字段数组 + imagePreview: { + type: Array as PropType, + default: () => [] + }, + // 视频自动预览字段数组 + videoPreview: { type: Array as PropType, default: () => [] }, @@ -339,7 +343,8 @@ export default defineComponent({ }) const renderTreeTableColumn = (columnsChildren: TableColumn[]) => { - const { align, headerAlign, showOverflowTooltip, preview } = unref(getProps) + const { align, headerAlign, showOverflowTooltip, imagePreview, videoPreview } = + unref(getProps) return columnsChildren.map((v) => { if (v.hidden) return null const props = { ...v } as any @@ -350,10 +355,10 @@ export default defineComponent({ const slots = { default: (...args: any[]) => { const data = args[0] - let isImageUrl = false - if (preview.length) { - isImageUrl = preview.some((item) => (item as string) === v.field) - } + let isPreview = false + isPreview = + imagePreview.some((item) => (item as string) === v.field) || + videoPreview.some((item) => (item as string) === v.field) return children && children.length ? renderTreeTableColumn(children) @@ -361,8 +366,8 @@ export default defineComponent({ ? props.slots.default(...args) : v?.formatter ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index) - : isImageUrl - ? renderPreview(get(data.row, v.field)) + : isPreview + ? renderPreview(get(data.row, v.field), v.field) : get(data.row, v.field) } } @@ -384,10 +389,11 @@ export default defineComponent({ }) } - const renderPreview = (url: string) => { + const renderPreview = (url: string, field: string) => { + const { imagePreview, videoPreview } = unref(getProps) return (
- {isImgPath(url) ? ( + {imagePreview.includes(field) ? ( - ) : ( + ) : videoPreview.includes(field) ? ( } @@ -408,7 +414,7 @@ export default defineComponent({ > 预览 - )} + ) : null}
) } @@ -423,7 +429,8 @@ export default defineComponent({ headerAlign, showOverflowTooltip, reserveSelection, - preview + imagePreview, + videoPreview } = unref(getProps) return (columnsChildren || columns).map((v) => { @@ -463,10 +470,10 @@ export default defineComponent({ default: (...args: any[]) => { const data = args[0] - let isImageUrl = false - if (preview.length) { - isImageUrl = preview.some((item) => (item as string) === v.field) - } + let isPreview = false + isPreview = + imagePreview.some((item) => (item as string) === v.field) || + videoPreview.some((item) => (item as string) === v.field) return children && children.length ? renderTreeTableColumn(children) @@ -474,8 +481,8 @@ export default defineComponent({ ? props.slots.default(...args) : v?.formatter ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index) - : isImageUrl - ? renderPreview(get(data.row, v.field)) + : isPreview + ? renderPreview(get(data.row, v.field), v.field) : get(data.row, v.field) } } diff --git a/src/utils/is.ts b/src/utils/is.ts index fd7ae335b..8ac2e50d0 100644 --- a/src/utils/is.ts +++ b/src/utils/is.ts @@ -106,9 +106,6 @@ export const isDark = (): boolean => { // 是否是图片链接 export const isImgPath = (path: string): boolean => { - if (path.includes('picsum.photos') || path.includes('loremflickr.com')) { - return true - } return /(https?:\/\/|data:image\/).*?\.(png|jpg|jpeg|gif|svg|webp|ico)/gi.test(path) } diff --git a/src/views/Components/Table/TableImagePreview.vue b/src/views/Components/Table/TableImagePreview.vue index 115694357..97b6c1735 100644 --- a/src/views/Components/Table/TableImagePreview.vue +++ b/src/views/Components/Table/TableImagePreview.vue @@ -77,6 +77,11 @@ getTableList() diff --git a/src/views/Components/Table/TableVideoPreview.vue b/src/views/Components/Table/TableVideoPreview.vue index 8bfd2e9e3..94aafc433 100644 --- a/src/views/Components/Table/TableVideoPreview.vue +++ b/src/views/Components/Table/TableVideoPreview.vue @@ -65,7 +65,7 @@ getTableList() :columns="columns" :data="tableDataList" :loading="loading" - :preview="['image_uri', 'video_uri']" + :video-preview="['image_uri', 'video_uri']" />