src/components/group/MyVideo.vue

@@ -1,10 +1,11 @@
<template>
   <div class="myModal">
      <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true"
         :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}" :afterClose="afterClose">
         <videoDetail ref="videoDetail"></videoDetail>
      <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>
@@ -13,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) {
@@ -36,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)
@@ -56,4 +82,7 @@
</script>
<style scoped>




</style>