|
|
|
@ -1,51 +1,87 @@ |
|
|
|
<template> |
|
|
|
<el-carousel arrow="always" style="width: 495px; height: 300px;"> |
|
|
|
<el-carousel-item v-for="item in carsouselData" :key="item.imgId" > |
|
|
|
<!-- <img |
|
|
|
style="width:100%,height:100%" |
|
|
|
referrerpolicy="no-referrer" |
|
|
|
:src="item.imgUrl" fit="fill" |
|
|
|
@error="errorImg($event)" |
|
|
|
/> --> |
|
|
|
<el-image style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="contain" alt="暂未上传" @click="handleLink(item)" > |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<el-image style="width: 100%; height: 100%;" :src="errimg" fit="contain" ></el-image> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
<el-carousel arrow="hover" :style="{height:carsuselHeight,width:carsuselWidth}" :interval = "interval" :height="carsuselHeight" trigger="click"> |
|
|
|
<el-carousel-item v-for="item in carsouselData" :key="item.imgId"> |
|
|
|
<el-image |
|
|
|
style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="cover" alt="暂未上传" |
|
|
|
@click="handleLink(item)"> |
|
|
|
<template #error> |
|
|
|
<!-- <div class="image-slot"> --> |
|
|
|
<el-image style="width: 100%; height: 100%" :src="errimg" fit="fill" @click="noMsg" ></el-image> |
|
|
|
<!-- </div> --> |
|
|
|
<!-- <div class="image-slot"> |
|
|
|
<el-icon><icon-picture /></el-icon> |
|
|
|
</div> --> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { CarsuselConfig } from '@/api/DesignForm/types' |
|
|
|
import { Picture as IconPicture } from '@element-plus/icons-vue' |
|
|
|
import errimg from '@/assets/404_images/imgNotFound.png' |
|
|
|
//import errimg from '@/assets/404_images/untilUploadImg.png' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
// eslint-disable-next-line vue/require-default-prop |
|
|
|
data: { |
|
|
|
type: Object, |
|
|
|
} |
|
|
|
}) |
|
|
|
const carsouselData:CarsuselConfig[] = props.data?.control.carsuselConfigArr |
|
|
|
const carsouselData: CarsuselConfig[] = props.data?.control.carsuselConfigArr |
|
|
|
|
|
|
|
const carsuselHeight = props.data?.control.config.carsuselHeight+'px' |
|
|
|
|
|
|
|
const carsuselWidth = props.data?.control.config.carsuselWidth+'px' |
|
|
|
|
|
|
|
const interval = props.data?.control.config.interval |
|
|
|
|
|
|
|
function errorImg(e: any) { |
|
|
|
e.srcElement.src = errimg; |
|
|
|
//这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用 |
|
|
|
e.srcElement.onerror = null; //防止闪图 |
|
|
|
} |
|
|
|
function handleLink(item:any){ |
|
|
|
alert(item.link) |
|
|
|
window.open(item.link,'_blank') |
|
|
|
function handleLink(item: any) { |
|
|
|
console.log("handleLink") |
|
|
|
let url = ""; |
|
|
|
let urlStart = 'http://' |
|
|
|
// http:// 7 |
|
|
|
//https:// 8 |
|
|
|
if (item.link.length < 7) { |
|
|
|
if (item.link == '') { |
|
|
|
alert("未配置跳转地址") |
|
|
|
return |
|
|
|
} |
|
|
|
url = urlStart + "" + item.link |
|
|
|
} else { |
|
|
|
const linkStartComplete1 = item.link.startsWith("http://") |
|
|
|
const linkStartComplete2 = item.link.startsWith("https://") |
|
|
|
if (linkStartComplete1 || linkStartComplete2) { |
|
|
|
url = item.link |
|
|
|
} else { |
|
|
|
url = urlStart + "" + item.link |
|
|
|
} |
|
|
|
} |
|
|
|
window.open(url, '_blank') |
|
|
|
} |
|
|
|
function noMsg() { |
|
|
|
alert("轮播图未配置") |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.lowcodeCarsousel{ |
|
|
|
height:300px; |
|
|
|
width:550px; |
|
|
|
.image-slot { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: var(--el-fill-color-light); |
|
|
|
color: var(--el-text-color-secondary); |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.demonstration { |
|
|
|
color: var(--el-text-color-secondary); |
|
|
|
} |
|
|
|
@ -66,5 +102,11 @@ function handleLink(item:any){ |
|
|
|
background-color: #d3dce6; |
|
|
|
} |
|
|
|
|
|
|
|
/* .el-carousel__item:nth-child(2n) { |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.el-carousel__item:nth-child(2n + 1) { |
|
|
|
background-color: white; |
|
|
|
} */ |
|
|
|
</style> |
