Browse Source

1.未上传图片的显示 "无" 字

2.fit设置支持
3.默认图片可修改开关
yunpan
liwenxuan 2 months ago
parent
commit
60f3c96b90
  1. 59
      src/components/lowCode/assistant/lowcodeImage.vue

59
src/components/lowCode/assistant/lowcodeImage.vue

@ -342,6 +342,40 @@ function completionImageDetails(urlString:string) {
const toShow = ref(false) const toShow = ref(false)
import { ref, watchEffect, nextTick } from 'vue'
// refspan
const noPhotoSpanRef = ref(null)
// span
const isNoPhotoSpanVisible = ref(false)
//
watchEffect(async () => {
//
const isDivConditionMet = !props.data.control.useDefaultImg
&& attrs.types === 2
&& props.data.control.onSiteShot === 1
const hasPlaceholder = valueArr.value?.includes('/src/assets/image/404_images/imgNotFound.png')
// DOM
await nextTick()
//
isNoPhotoSpanVisible.value = !!noPhotoSpanRef.value
})
const fit = computed(()=>{
if(props.data.styles.divStyle&&props.data.styles.divStyle.objectFit){
return props.data.styles.divStyle.objectFit
}else{
return 'fill'
}
})
</script> </script>
<template> <template>
<!-- {{ checkIsMobile() }} --> <!-- {{ checkIsMobile() }} -->
@ -354,6 +388,14 @@ const toShow = ref(false)
/> --> /> -->
<el-image
v-if="props.data.control.useDefaultImg&&props.data.control.defaultAllowsChange=='0'"
:src="props.modelValue"
class="avatar"
:style="getFormItemInputStyle(configStyle, 2)"
:fit="fit"
/>
<el-upload <el-upload
v-bind="$props" v-bind="$props"
class="upload-demo" class="upload-demo"
@ -363,11 +405,12 @@ const toShow = ref(false)
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
v-loading="imgLoading" v-loading="imgLoading"
> >
<img <el-image
v-if="props.data.control.useDefaultImg" v-if="props.data.control.useDefaultImg&&props.data.control.defaultAllowsChange==''"
:src="props.modelValue" :src="props.modelValue"
class="avatar" class="avatar"
:style="getFormItemInputStyle(configStyle, 2)" :style="getFormItemInputStyle(configStyle, 2)"
:fit="fit"
/> />
</el-upload> </el-upload>
@ -391,10 +434,14 @@ const toShow = ref(false)
<el-button @click="selectFile" style="color:grey;font-weight: bolder;margin-top: 5px;margin-bottom: 5px;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon></el-button> <el-button @click="selectFile" style="color:grey;font-weight: bolder;margin-top: 5px;margin-bottom: 5px;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon></el-button>
</div> </div>
<div v-if="!props.data.control.useDefaultImg&&attrs.types!=3&&props.data.control.onSiteShot&&props.data.control.onSiteShot=='1'" style="width: 100%; color:orangered"> <div v-if="!props.data.control.useDefaultImg&&attrs.types!=3&&props.data.control.onSiteShot&&props.data.control.onSiteShot=='1'" style="width:100%; color:orangered">
<el-button v-if="attrs.types!=2&&checkIsMobile()" @click="selectFile" style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon></el-button> <el-button v-if="attrs.types!=2&&checkIsMobile()" @click="selectFile" style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon></el-button>
<div v-else style="margin-top: 1.2%;margin-left: 1.1%;" >不可修改 仅允许现场手机拍照上传</div> <div v-else ref="noPhotoSpanRef" style="margin-top: 1.7%;margin-left: 1.1%; " >
<span v-show="!isNoPhotoSpanVisible">未拍照 ,</span>
<span > 不可修改 , 仅允许现场手机拍照上传</span>
</div>
</div> </div>
<el-upload <el-upload
@ -429,6 +476,7 @@ const toShow = ref(false)
<!-- 详情页略缩图列表 --> <!-- 详情页略缩图列表 -->
<div v-if ="!props.data.control.useDefaultImg&&attrs.types==3" v-for="url in valueArr" class="demo-image__preview"> <div v-if ="!props.data.control.useDefaultImg&&attrs.types==3" v-for="url in valueArr" class="demo-image__preview">
<el-image <el-image
v-if="url!='/src/assets/image/404_images/imgNotFound.png'"
style="width: 100px; height: 100px;margin: 4px;border: #DCDFE6 1px solid; border-radius: 8px;" style="width: 100px; height: 100px;margin: 4px;border: #DCDFE6 1px solid; border-radius: 8px;"
:src="url" :src="url"
:zoom-rate="1.2" :zoom-rate="1.2"
@ -439,11 +487,13 @@ const toShow = ref(false)
:initial-index="4" :initial-index="4"
fit="cover" fit="cover"
/> />
<span v-else style="display: inline-block;"></span>
</div> </div>
<div v-if ="!props.data.control.useDefaultImg&&attrs.types==2&&props.data.control.onSiteShot==1" v-for="url in valueArr" class="demo-image__preview"> <div v-if ="!props.data.control.useDefaultImg&&attrs.types==2&&props.data.control.onSiteShot==1" v-for="url in valueArr" class="demo-image__preview">
<el-image <el-image
v-if="url!='/src/assets/image/404_images/imgNotFound.png'"
style="width: 100px; height: 100px;margin: 4px;border: #DCDFE6 1px solid; border-radius: 8px;" style="width: 100px; height: 100px;margin: 4px;border: #DCDFE6 1px solid; border-radius: 8px;"
:src="url" :src="url"
:zoom-rate="1.2" :zoom-rate="1.2"
@ -454,6 +504,7 @@ const toShow = ref(false)
:initial-index="4" :initial-index="4"
fit="cover" fit="cover"
/> />
<span v-else style="display: none;margin-top: 5px;"></span>
</div> </div>

Loading…
Cancel
Save