src/components/group/MyVideo.vue

@@ -1,41 +1,88 @@
<template>
   <div class="myModal">
      <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="false" :placement="placement"
         :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
         <div>11</div>

      <a-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 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,
            placement: "bottom"
            articleId: "",
            myWidth: 410,
            showFade: true,
         }
      },
      beforeMount() {},
      methods: {
         showModal() {
         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.$emit("closeMyVideo")
         }
      },
   }
</script>
<style scoped>

   a {
      color: black;
   }



</style>