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

update:更新

上级 574403eb
.app-rawitem-carousel{
width: 100%;
height: 200px;
.carsouel-container{
width: 100%;
height: 100%;
}
}
\ No newline at end of file
<template>
<div class="app-carouse">
<Carousel :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
<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="carousel-img-item">
<a v-if="item.linkPath" :href="item.linkPath">
......@@ -26,7 +26,7 @@ export default class AppCarousel extends Vue {
@Prop() public data?: any;
/**
* @description 轮播图数据
* @description 轮播图样式
* @param {*}
* @memberof AppCarousel
*/
......@@ -52,11 +52,10 @@ export default class AppCarousel extends Vue {
* @param {*} oldVal
* @memberof AppCarousel
*/
@Watch('data', { immediate: true })
@Watch('data', { immediate: true, deep: true })
public onDataChange(newVal: any, oldVal: any) {
if (!Object.is(newVal, oldVal)) {
this.swipeData = newVal.swipeData;
this.swipeConfig = newVal.swipeConfig;
if (newVal) {
this.handleSwipData(newVal);
}
}
......@@ -65,8 +64,51 @@ export default class AppCarousel extends Vue {
* @memberof AppCarousel
*/
created() {
this.swipeData = this.data.swipeData;
this.swipeConfig = this.data.swipeConfig;
this.handleSwipData(this.data);
}
/**
* @description 处理轮播图数据
* @memberof AppCarousel
*/
private handleSwipData(data: any) {
if (data && data.length > 0) {
const configItem = data.findIndex((item: any) =>
Object.is(item.key, "autoplay")
);
if (configItem > -1) {
// 有配置参数就截掉配置参数
this.swipeData = data.slice(0, -2);
this.swipeConfig = this.setSwipeConfig(data.slice(-2));
} else {
this.swipeData = this.data;
this.swipeConfig = this.setSwipeConfig(data);
}
}
}
/**
* @description 设置轮播图配置
* @param {*}
* @memberof AppRawItem
*/
private setSwipeConfig(data: any) {
const autoPlay: any =
data.find((item: any) => Object.is(item.key, "autoplay")) || {};
const timeSpan: any =
data.find((item: any) => Object.is(item.key, "timespan")) || {};
let isauto = false;
let timespan = 0;
if (autoPlay.value && Object.is(autoPlay.value, "1")) {
isauto = true;
}
if (timeSpan.value) {
timespan = Number(timeSpan.value);
}
return {
isAuto: isauto,
timeSpan: timespan,
};
}
/**
......
......@@ -4,7 +4,8 @@
>img{
width: auto;
height: 100%;
max-width: 100%;
height: 360px;
object-fit: contain;
}
}
\ No newline at end of file
.app-rawitem-video{
width: 600px;
height: auto;
max-width: 100%;
min-height: 300px;
border: 1px solid gray;
>video{
width: 100%;
height: 100%;
}
}
\ No newline at end of file
<template>
<div :id="uuid" class="render-video"></div>
<div class="app-rawitem-video">
<video
:src="playerParams.url"
:autoplay="playerParams.autoplay"
:controls="playerParams.controls"
:loop="playerParams.loop"
:muted="playerParams.volume">
</video>
</div>
</template>
<script lang="ts">
// import Player from 'xgplayer';
import { Util } from '@/utils';
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({})
......@@ -18,35 +25,29 @@ export default class AppVideo extends Vue {
*/
@Prop() public videoParmas?: any;
get Params() {
return this.videoParmas ? this.videoParmas : {};
}
//视频播放参数
public playerParams = {
id: this.uuid,
height: '100%',
width: '100%',
url:"https://kvideo01.youju.sohu.com/16403c4c-378c-4415-b3ef-908e87efb0082_0_0.mp4",
volume:0.8,
autoplay:false,
loop:false,
controls:false
};
/**
* 生命周期
*/
public mounted() {
let defaultHeight = 337.5;
let defaultwidth = 600;
if (this.$el) {
defaultHeight = this.$el.clientHeight;
defaultwidth = this.$el.clientWidth;
if (this.videoParmas) {
this.playerParams.url = this.videoParmas.path;
this.playerParams.volume = this.videoParmas.mute ? 0 : 0.8;
this.playerParams.autoplay = this.videoParmas.autoplay ? true : false;
this.playerParams.loop = this.videoParmas.replay ? true : false;
this.playerParams.controls = this.videoParmas.showcontrols ? true : false
}
// let player = new Player({
// id: this.uuid,
// fluid: true,
// height: defaultHeight,
// width: defaultwidth,
// });
// if (this.videoParmas) {
// player.trl = this.videoParmas.path;
// }
// if (this.Params) {
// player.volume = this.Params.mute ? 0 : 0.8;
// player.autoplay = this.Params.autoplay ? true : false;
// player.loop = this.Params.replay ? true : false;
// player.controls = this.Params.showcontrols ? true : false
// }
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册