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

update:更新

上级 059a933a
.app-rawitem-carousel{ .app-rawitem-carousel{
width: 100%; width: 100%;
height: 200px;
.carsouel-container{ .carsouel-container{
width: 100%; .carousel-img-item{
height: 100%; 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> <template>
<div class="app-rawitem-carousel"> <div class="app-rawitem-carousel">
<Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" <el-carousel class="carsouel-container"
radius-dot> height="150px"
<CarouselItem v-for="(item, index) in swipeData" :key="index"> indicator-position="outside"
:autoplay="false"
:interval="swipeConfig.interval"
>
<el-carousel-item v-for="item in swipeData" :key="item">
<div class="carousel-img-item"> <div class="carousel-img-item">
<a v-if="item.linkPath" :href="item.linkPath"> <img class="app-carouse-img" v-if="item.type === 'img'" :src="item.value" @error="imgError" />
<img class="app-carouse-img" v-if="item.imgPath" :src="item.imgPath" @error="imgError" /> <i v-else :class="item.value" ></i>
<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>
</div> </div>
</CarouselItem> </el-carousel-item>
</Carousel> </el-carousel>
</div> </div>
</template> </template>
<script lang='ts'> <script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ImgurlBase64 } from '@/utils';
import { Environment } from "@/environments/environment";
@Component({}) @Component({})
export default class AppCarousel extends Vue { export default class AppCarousel extends Vue {
/** /**
...@@ -128,9 +126,6 @@ export default class AppCarousel extends Vue { ...@@ -128,9 +126,6 @@ export default class AppCarousel extends Vue {
this.swipeConfig = this.setSwipeConfig(data); 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 { ...@@ -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错误 * img src错误
* *
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册