From 80476fae71f08bf4408c7509eff254031a4eeac6 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 24 Aug 2022 18:47:09 +0800 Subject: [PATCH] 路由修正,常量提取 --- src/components/group/MyVideo.vue | 40 +++++++++++++++++++++++++++++++++++----- 1 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue index 4efcec7..dd11d19 100644 --- a/src/components/group/MyVideo.vue +++ b/src/components/group/MyVideo.vue @@ -1,8 +1,8 @@ <template> <div class="myModal"> - <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true" - :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}"> - <videoDetail ref="videoDetail"></videoDetail> + <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> @@ -14,6 +14,14 @@ export default { components: { videoDetail, + }, + mounted() { + this.juseWidth(document.body.clientWidth) + window.onresize = () => { + return (() => { + this.juseWidth(document.body.clientWidth) + })(); + }; }, watch: { // '$route'(to, from) { @@ -37,10 +45,27 @@ 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) @@ -49,10 +74,15 @@ handleCancel(e) { this.visible = false; }, + afterClose() { + //关闭视频播放 + this.$refs.videoDetail.$refs.videoPlayBox.pauseMyVideo() + this.$emit("closeMyVideo") + } }, } </script> -<style scoped> - +<style lang="less"> + </style> -- Gitblit v1.9.1