|
|
|
@ -15,6 +15,8 @@ import { |
|
|
|
constGetControlByName |
|
|
|
} from '@/api/lowCode/utils'; |
|
|
|
|
|
|
|
import { computed } from 'vue'; |
|
|
|
|
|
|
|
const props = withDefaults( |
|
|
|
defineProps<{ |
|
|
|
modelValue?: string |
|
|
|
@ -137,11 +139,37 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => { |
|
|
|
// console.log("uploadSuccess===>",control.value) |
|
|
|
// console.log("uploadSuccess=fileList==>",fileList) |
|
|
|
} |
|
|
|
|
|
|
|
const imgAry = computed({ |
|
|
|
get: () => { |
|
|
|
if ( |
|
|
|
props.imgList != "" && |
|
|
|
props.imgList != null && |
|
|
|
props.imgList != undefined && |
|
|
|
props.imgList != "undefined" |
|
|
|
) { |
|
|
|
// let zj = props.imgList |
|
|
|
// let img = zj.Split(","); |
|
|
|
let arr = props.imgList.match(/[^,]+/g); |
|
|
|
console.log("文件列表", arr); |
|
|
|
return arr; |
|
|
|
} else { |
|
|
|
return []; |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
function openUrl1(url:string) { |
|
|
|
|
|
|
|
window.open(url, '_blank') |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
<template><!-- {'{types}} --> |
|
|
|
<div style="width: 100%; |
|
|
|
display: inline;"> |
|
|
|
<el-upload |
|
|
|
v-if="props.types!=3" |
|
|
|
v-bind="props.control" |
|
|
|
:action="uploadUrl" |
|
|
|
:name="props.name" |
|
|
|
@ -172,6 +200,19 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => { |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-upload> |
|
|
|
<div v-else> |
|
|
|
<span v-if="fileList.length==0">无</span> |
|
|
|
<div v-for="item in fileList"> |
|
|
|
<!-- <el-link :underline="false" :href="item.url" target="_blank" style="color: blue;">{{ item.url }}</el-link> --> |
|
|
|
<!-- <br /> --> |
|
|
|
|
|
|
|
<div v-if="types==3" class="url-container" @click="openUrl1(item.url)"> |
|
|
|
<span class="url-content"> |
|
|
|
{{ item.url }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style lang='scss' > |
|
|
|
@ -185,4 +226,26 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => { |
|
|
|
transition: all .5s cubic-bezier(.55,0,.1,1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.url-container { |
|
|
|
/* 容器样式(保持点击和下划线等特性) */ |
|
|
|
cursor: pointer; |
|
|
|
color: #0000EE; |
|
|
|
text-decoration: underline; |
|
|
|
/* 可选:限制容器最大宽度,避免span无限拉伸 */ |
|
|
|
max-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.url-content { |
|
|
|
/* 1. 自定义触发溢出的宽度(例如300px) */ |
|
|
|
width: 100%; |
|
|
|
/* 2. 块级显示,确保width生效 */ |
|
|
|
display: inline-block; |
|
|
|
/* 3. 超出宽度后自动换行(默认行为,可省略) */ |
|
|
|
white-space: normal; |
|
|
|
/* 4. 处理长英文/数字不换行问题(可选) */ |
|
|
|
word-wrap: break-word; |
|
|
|
text-decoration:underline; |
|
|
|
} |
|
|
|
</style> |