src/components/group/MyVideo.vue

@@ -1,44 +1,88 @@
<template>
   <div class="myModal">
      <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="true"
         :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
         <div>{{this.placement}}</div>
         <videoPlayBox></videoPlayBox>
      <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 {
      history
   } from '../../api/blogArticleComment.js'
   import videoPlayBox from "../mini/box15-videoPlayBox.vue"
   import videoDetail from "../mini/box16-videoDetail.vue"

   export default {
      components: {
         videoPlayBox
         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,
            placement: "fbottom"
            articleId: "",
            myWidth: 410,
            showFade: true,
         }
      },
      beforeMount() {},
      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) {
            this.placement = param.id
            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 scoped>
   a {
      color: black;
   }
<style lang="less">
	
</style>