<template>
|
<div class="myModal">
|
<a-modal v-drag-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false"
|
:maskClosable="true" :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose">
|
<videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
|
</a-modal>
|
</div>
|
|
</template>
|
|
<script>
|
import videoDetail from "../mini/box16-videoDetail.vue"
|
|
export default {
|
components: {
|
videoDetail,
|
},
|
mounted() {
|
this.juseWidth(document.body.clientWidth)
|
window.onresize = () => {
|
return (() => {
|
this.juseWidth(document.body.clientWidth)
|
})();
|
};
|
},
|
watch: {
|
// '$route'(to, from) {
|
// if ("mdDetail" === to.name) {
|
// this.articleId = this.$route.query.id;
|
// this.articleFileType = this.$route.query.articleFileType;
|
// }
|
// },
|
articleId: function(newValue, oldValue) {
|
if (newValue == undefined || newValue == null || newValue == "") {
|
this.showMsg = true;
|
this.errorMsg = "日志id参数缺失";
|
} else {
|
this.$nextTick(function() {
|
this.$refs.myComment.updateCommentList(this.articleId);
|
})
|
}
|
},
|
},
|
data() {
|
return {
|
visible: false,
|
articleId: "",
|
myWidth: 410,
|
showFade: true,
|
}
|
},
|
methods: {
|
juseWidth(screenWidth) {
|
this.showFade = true;
|
if (screenWidth > 1000) {
|
this.myWidth = 1000
|
} else if (screenWidth > 767) {
|
this.myWidth = 600
|
} else {
|
this.myWidth = 410
|
this.showFade = false;
|
}
|
},
|
showModal(param) {
|
if (this.$route.path == "/videoDetail") {
|
this.$message.info("已经在播放页面啦..")
|
return
|
}
|
this.visible = true;
|
this.$nextTick(function() {
|
this.$refs.videoDetail.showVideo(param)
|
})
|
},
|
handleCancel(e) {
|
this.visible = false;
|
},
|
afterClose() {
|
//关闭视频播放
|
this.$refs.videoDetail.$refs.videoPlayBox.pauseMyVideo()
|
|
this.$emit("closeMyVideo")
|
}
|
},
|
}
|
</script>
|
<style lang="less">
|
|
</style>
|