@ganwei-web/gw-base-components-plus 1.0.53 → 1.0.55
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.
- package/file-preview/filePreview.vue +36 -7
- package/package.json +1 -1
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<span class="file-preview">
|
|
3
|
+
<span class="file-name">{{ showFileName ? filename : $t("login.framePro.label.attachment") }}</span>
|
|
3
4
|
<el-button v-if="isPreview" type="primary" link @click="handlePreview">
|
|
4
|
-
|
|
5
|
+
{{$t("login.framePro.label.preview")}}
|
|
5
6
|
</el-button>
|
|
6
7
|
<el-button v-if="isDownload" type="primary" link @click="handleDownload">
|
|
7
|
-
|
|
8
|
+
{{$t("login.framePro.label.download")}}
|
|
8
9
|
</el-button>
|
|
9
10
|
</span>
|
|
10
11
|
</template>
|
|
11
12
|
|
|
12
13
|
<script setup>
|
|
13
|
-
import {
|
|
14
|
+
import { computed } from 'vue'
|
|
15
|
+
import 'js-base64'
|
|
16
|
+
|
|
17
|
+
const Base64 = window.Base64
|
|
14
18
|
|
|
15
19
|
const props = defineProps({
|
|
16
20
|
// 文件地址
|
|
@@ -26,12 +30,28 @@ const props = defineProps({
|
|
|
26
30
|
// 是否显示预览按钮
|
|
27
31
|
isPreview: {
|
|
28
32
|
type: Boolean,
|
|
29
|
-
default:
|
|
33
|
+
default: true
|
|
30
34
|
},
|
|
31
35
|
// 是否显示下载按钮
|
|
32
36
|
isDownload: {
|
|
33
37
|
type: Boolean,
|
|
34
|
-
default:
|
|
38
|
+
default: true
|
|
39
|
+
},
|
|
40
|
+
// 是否显示文件名，false 时显示“附件”
|
|
41
|
+
showFileName: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: true
|
|
44
|
+
}
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
// 从 url 中截取文件名
|
|
48
|
+
const filename = computed(() => {
|
|
49
|
+
const value = props.url || ''
|
|
50
|
+
const raw = value.substring(value.lastIndexOf('/') + 1).split('?')[0]
|
|
51
|
+
try {
|
|
52
|
+
return decodeURIComponent(raw)
|
|
53
|
+
} catch (e) {
|
|
54
|
+
return raw
|
|
35
55
|
}
|
|
36
56
|
})
|
|
37
57
|
|
|
@@ -64,10 +84,9 @@ function handlePreview() {
|
|
|
64
84
|
|
|
65
85
|
// 下载
|
|
66
86
|
function handleDownload() {
|
|
67
|
-
const filename = props.url.substring(props.url.lastIndexOf('/') + 1).split('?')[0]
|
|
68
87
|
const link = document.createElement('a')
|
|
69
88
|
link.href = props.url
|
|
70
|
-
link.download = filename
|
|
89
|
+
link.download = filename.value
|
|
71
90
|
document.body.appendChild(link)
|
|
72
91
|
link.click()
|
|
73
92
|
document.body.removeChild(link)
|
|
@@ -78,5 +97,15 @@ function handleDownload() {
|
|
|
78
97
|
.file-preview {
|
|
79
98
|
display: inline-flex;
|
|
80
99
|
align-items: center;
|
|
100
|
+
gap: 4px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.file-name {
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
text-overflow: ellipsis;
|
|
106
|
+
white-space: nowrap;
|
|
107
|
+
max-width: 200px;
|
|
108
|
+
margin-right: 12px;
|
|
109
|
+
line-height: 16px;
|
|
81
110
|
}
|
|
82
111
|
</style>
|