提交 a4010ed5 编写于 作者: glod-money-money's avatar glod-money-money

update:更新

上级 059a933a
.app-rawitem-carousel{
width: 100%;
height: 200px;
.carsouel-container{
width: 100%;
height: 100%;
.carousel-img-item{
width: 100%;
height: 100%;
position: relative;
text-align: center;
>img,i{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.app-carouse-img{
object-fit: contain;
width: 100%;
height: 100%;
}
}
}
}
\ No newline at end of file
<template>
<div class="app-rawitem-carousel">
<Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan"
radius-dot>
<CarouselItem v-for="(item, index) in swipeData" :key="index">
<div class="app-rawitem-carousel">
<el-carousel class="carsouel-container"
height="150px"
indicator-position="outside"
:autoplay="false"
:interval="swipeConfig.interval"
>
<el-carousel-item v-for="item in swipeData" :key="item">
<div class="carousel-img-item">
<a v-if="item.linkPath" :href="item.linkPath">
<img class="app-carouse-img" v-if="item.imgPath" :src="item.imgPath" @error="imgError" />
<i v-else :class="item.iconClass"></i>
</a>
<img class="app-carouse-img" v-else-if="item.imgPath" :src="item.imgPath" @error="imgError" />
<i v-else :class="item.iconClass.cssClass" :style="handleIconCss(item.iconClass)"></i>
<img class="app-carouse-img" v-if="item.type === 'img'" :src="item.value" @error="imgError" />
<i v-else :class="item.value" ></i>
</div>
</CarouselItem>
</Carousel>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ImgurlBase64 } from '@/utils';
import { Environment } from "@/environments/environment";
@Component({})
export default class AppCarousel extends Vue {
/**
......@@ -128,9 +126,6 @@ export default class AppCarousel extends Vue {
this.swipeConfig = this.setSwipeConfig(data);
}
}
this.swipeData = this.swipeData.map((item: any) => {
return this.addressProcessing(item);
});
}
/**
......@@ -157,62 +152,6 @@ export default class AppCarousel extends Vue {
};
}
/**
* 处理轮播图地址
*
* @memberof AppPresetRawitem
*/
private async addressProcessing(item: any) {
let _item: any = {};
if (this.type === "FIELD_CAROUSEL") {
let url = `${Environment.BaseUrl}${Environment.ExportFile}/${item.id}`;
let res = await ImgurlBase64.getInstance().getImgURLOfBase64(url);
_item.linkPath = item.linkPath;
_item.imgPath = res;
_item.iconClass = item.iconclass;
} else if (this.type === "STATIC_CAROUSEL") {
_item.linkPath = item.linkPath;
_item.imgPath = this.getImagePath(item);
_item.iconClass = this.getImageClass(item) || '';
}
return _item;
}
//TODO
/**
* 获取图片路径
*
* @memberof AppPresetRawitem
*/
public getImagePath(item: any) {
if (item && item.getPSSysImage && item.getPSSysImage.imagePath) {
return item.getPSSysImage.imagePath;
}
}
/**
* @description 获取imageClass
* @param {*}
* @memberof AppRawItem
*/
public getImageClass(item: any) {
if (item && item.getPSSysImage && item.getPSSysImage.cssClass) {
return item.getPSSysImage.cssClass;
}
}
/**
* 处理图标大小
* @memberof AppMobCarousel
*/
public handleIconCss(data: any) {
return {
width: data.width || 6 + 'px',
height: data.height || 6 + 'px',
};
}
/**
* img src错误
*
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册