|
@@ -56,7 +56,7 @@
|
|
|
<template slot-scope="{row}">
|
|
|
<!-- 视频封面 -->
|
|
|
<div class="img-box" v-if="column.key==='CoverImg'">
|
|
|
- <img :src="row.CoverImg" >
|
|
|
+ <img :src="row.CoverImg" @click="handlePreviewVideo(row)">
|
|
|
</div>
|
|
|
<!-- 分类 -->
|
|
|
<span v-else-if="column.key==='Classify'">
|
|
@@ -89,6 +89,20 @@
|
|
|
style="text-align:right;margin-top:30px;">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
+ <!-- 预览视频弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="previewPop"
|
|
|
+ :modal-append-to-body='false'
|
|
|
+ v-dialogDrag
|
|
|
+ width="60vw"
|
|
|
+ :title="previewPopTitle"
|
|
|
+ @close="endingPreview"
|
|
|
+ >
|
|
|
+ <video style="width: 100%;height: 100%;max-height: 70vh;outline: none;"
|
|
|
+ controls :src="previewVideoUrl" autoplay ref="previewVideo">
|
|
|
+ 您的浏览器暂不支持,请更换浏览器
|
|
|
+ </video>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -115,6 +129,10 @@ export default {
|
|
|
pageSize: 10,
|
|
|
total: 0,
|
|
|
|
|
|
+ previewPop:false,
|
|
|
+ previewVideoUrl:'',
|
|
|
+ previewPopTitle:''
|
|
|
+
|
|
|
|
|
|
};
|
|
|
},
|
|
@@ -194,7 +212,18 @@ export default {
|
|
|
handleCurrentChange(page){
|
|
|
this.currentPage = page
|
|
|
this.getTableData()
|
|
|
- }
|
|
|
+ },
|
|
|
+ handlePreviewVideo(data){
|
|
|
+ if(!data.VideoUrl) return
|
|
|
+ this.$refs.previewVideo && this.$refs.previewVideo.play()
|
|
|
+ this.previewPopTitle = data.Title||'暂无标题'
|
|
|
+ this.previewVideoUrl = data.VideoUrl
|
|
|
+ this.previewPop = true
|
|
|
+ },
|
|
|
+ // 结束预览弹窗关闭回调 -- 暂停视频
|
|
|
+ endingPreview(){
|
|
|
+ this.$refs.previewVideo && this.$refs.previewVideo.pause()
|
|
|
+ },
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getClassifyList()
|