Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-R7-Res
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-R7-Res
提交
a4010ed5
提交
a4010ed5
编写于
11月 03, 2022
作者:
glod-money-money
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update:更新
上级
059a933a
变更
2
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
31 行增加
和
76 行删除
+31
-76
app-rawitem-carousel.less
...ment/media/app-rawitem-carousel/app-rawitem-carousel.less
+19
-3
app-rawitem-carousel.vue
...ement/media/app-rawitem-carousel/app-rawitem-carousel.vue
+12
-73
未找到文件。
src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.less
浏览文件 @
a4010ed5
.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
src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue
浏览文件 @
a4010ed5
<
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>
</
CarouselI
tem>
</
el-carousel-i
tem>
</
C
arousel>
</
el-c
arousel>
</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
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录