<template> <div class="mp4"> <div class="flex flex-wrap justify-between video-list"> <div v-for="item in files" :key="item.annexId" @click.stop="start(item)"> <div class="item"> <div class="shrink-0 play-bt" > <doc-icon type="doc-play" /> </div> <span class="close-btn" @click.stop="removeBtn(item)" v-if="remove"> <doc-icon type="close-circle" /> </span> </div> <div v-if="item.annexFileName" class="text-12 my-1 text-ellipsis">{{ item.annexFileName }}</div> </div> </div> <!-- <van-popup v-model:show="visible" :close-on-click-overlay="false" closeable close-icon-position="top-right" close-icon="clear"> <video controls v-if="visible" style="width: calc(100vw - var(--van-padding-md) * 2)"> <source :src="activeVideo.annexUrl" type="video/mp4" /> 播放失败! </video> </van-popup> --> <van-overlay :show="visible"> <div class="h-full flex items-center justify-center wrapper" @click.stop> <video controls v-if="visible"> <source :src="activeVideo.annexUrl" type="video/mp4" /> 播放失败! </video> <van-icon name="close" class="close-icon" @click="visible = false"/> </div> </van-overlay> </div> </template> <script> export default { props: { files: { default: () => [] }, remove: Boolean }, emits: ['play', 'onRemove'], data() { return { visible: false, activeVideo: {} } }, methods: { start(item) { this.activeVideo = item this.visible = true this.$emit('play', item) }, removeBtn(item) { this.$emit('onRemove', item) } } } </script> <style lang="less" scoped> .video-list { >div { width: calc(50% - 5px); .item { position: relative; background: url('@/assets/image/residentWX/video-default.png') no-repeat; background-size: 100%; height: .84rem; display: flex; align-items: center; justify-content: center; } } .play-bt { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background-color: #E4F2F0; font-size: 15px; padding-left: 2px; color: var(--van-primary-color); } .close-btn { position: absolute; font-size: 16px; top: -8px; right: -8px; } } .wrapper { position: relative; .close-icon { position: absolute; top: 16px; right: 16px; color: #ccc; font-size: 24px; } video { width: calc(100vw - var(--van-padding-md) * 2); background-color: #fff; } } </style>