hookehuyr

上传组件点击查看现有文件时操作逻辑优化

1 <!-- 1 <!--
2 * @Date: 2022-08-31 16:16:49 2 * @Date: 2022-08-31 16:16:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-27 08:22:39 4 + * @LastEditTime: 2024-07-27 13:07:02
5 * @FilePath: /data-table/src/components/FileUploaderField/index.vue 5 * @FilePath: /data-table/src/components/FileUploaderField/index.vue
6 * @Description: 文件上传控件 6 * @Description: 文件上传控件
7 --> 7 -->
...@@ -54,13 +54,20 @@ ...@@ -54,13 +54,20 @@
54 <van-divider /> 54 <van-divider />
55 </div> 55 </div>
56 <div v-else style="padding: 1rem;"> 56 <div v-else style="padding: 1rem;">
57 - <a 57 + <!-- <a
58 v-for="(item, index) in default_file" :key="index" 58 v-for="(item, index) in default_file" :key="index"
59 :href="item.url" 59 :href="item.url"
60 :download="item.name" 60 :download="item.name"
61 style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem;" 61 style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem;"
62 > 62 >
63 {{ item.name }} 63 {{ item.name }}
64 + </a> -->
65 + <a
66 + @click="downloadFile(item)"
67 + v-for="(item, index) in default_file" :key="index"
68 + style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem; cursor:pointer;"
69 + >
70 + {{ item.name }}
64 </a> 71 </a>
65 </div> 72 </div>
66 </div> 73 </div>
...@@ -87,6 +94,7 @@ import BMF from "browser-md5-file"; ...@@ -87,6 +94,7 @@ import BMF from "browser-md5-file";
87 import { useRoute } from "vue-router"; 94 import { useRoute } from "vue-router";
88 import axios from "axios"; 95 import axios from "axios";
89 import { getEtag } from "@/utils/qetag.js"; // 生成hash值 96 import { getEtag } from "@/utils/qetag.js"; // 生成hash值
97 +import { wxInfo } from "@/utils/tools";
90 98
91 const $route = useRoute(); 99 const $route = useRoute();
92 const props = defineProps({ 100 const props = defineProps({
...@@ -107,6 +115,16 @@ onMounted(() => { ...@@ -107,6 +115,16 @@ onMounted(() => {
107 } 115 }
108 }) 116 })
109 117
118 +const downloadFile = (item) => {
119 + if (wxInfo().isWeiXin) {
120 + // 在微信内置浏览器中,直接跳转到手机自带浏览器中下载文件
121 + window.location.href = item.url;
122 + } else {
123 + // 不在微信内置浏览器中,直接打开下载链接
124 + window.open(item.url, '_blank');
125 + }
126 +}
127 +
110 // 文件类型中文页面显示 128 // 文件类型中文页面显示
111 const type_text = computed(() => { 129 const type_text = computed(() => {
112 return props.item.component_props.file_type; 130 return props.item.component_props.file_type;
......