拿来即用, el-carousel卡片式视频轮播

拿来即用的轮子组件,备份用于之后需求.

二次封装了el-carousel走马灯组件针对视频做出优化,设置了遮罩层封面与视频逻辑判断,对播放完成/内容切换做出终止监听等.

<el-carousel @change="handleChange" type="card" arrow="never" :autoplay="false" indicator-position="none" height="420px">
    <el-carousel-item v-for="(lis, index) in videoList" :key="index">
        <div class="picItem">
            <!-- 封面图与播放按钮(文件自行替换) -->
            <img :src="lis.picUrl" alt="">
            <span>
                <img class="playbtn" src="@/img/play.png" alt="" @click="playVideo(lis.fileUrl, index)">
            </span>
        </div>
        <div class="VideoItem" v-if="videoLink && index === pickVideoId">
            <video @ended="onEnded" :src="videoLink" autoplay="autoplay" controls="controls" width="740" height="410"></video>
        </div>
    </el-carousel-item>
</el-carousel>

let videoLink = ref(null);
let pickVideoId = ref(0);
// 切换时清空地址关闭视频
function handleChange(event){
    videoLink.value = null;
}

function playVideo(url, index) {
    videoLink.value = imageUrl.value + url;
    pickVideoId.value = index;
}
function onEnded() {
    videoLink.value = null;
}

.el-carousel__item{
    width: 740px;
    height: 410px;
    margin-left: -90px;
    cursor: default;
}

.picItem{
    width: 100%;
    height: 100%;
    position: relative;
}
.picItem>img{
    position: absolute;
    width: 100%;
    height: 100%;
}
.picItem>span{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51,0.23);
}
.picItem>span>img{
    width: 64px;
    height: 64px;
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    cursor: pointer;
}
.VideoItem{
    position: absolute;
    z-index: 9;
    top: 0;
}