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>