vue（父子元件）使用element彈窗功能

注意點

1. 注意使用父子元件傳值的時候，props的值是單項的。
2. 是以說在做彈窗的時候我們需要先，父元件向子元件傳值，然後子元件向父元件傳值。

父元件

<template>
  <div>
    <div class="displayVideo">
      <template>
        <ul v-infinite-scroll="load"  class="personalDiaplayLine infinite-list" style="overflow:auto">
          <li v-for=" ( item,index ) in personalDiaplayLine" :key="index">
            <ul>
              <li v-for="( ite,ind ) in personalDiaplay" :key="ind ">
                <img :src="ite.url" :title="ite.title" width="100%" height="100%" @click="videoSpring">
                <i class="videospanclose" />
                <p>{{ ite.title }}</p>
              </li>
            </ul>
          </li>
        </ul>
      </template>
    </div>
    <VideoFrame :display="display" @sendFVideo="getMsgVideoSon" />
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="55%"
    >
      <div class="boxDisplay">
        <easy-player :video-url="videoUrl" :poster="videoImg" />
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
import 'videojs-contrib-hls'
import VideoFrame from '@/components/file/video/videoFrame'
export default {
  name: 'File',
  // eslint-disable-next-line vue/no-unused-components
  components: { EasyPlayer, VideoFrame },
  data() {
    return {
      display: false,
      personalDiaplayLine: 0,
      videoUrl: require('@/assets/video/DPlayer.webm'),
      videoImg: require('@/assets/3.jpg'),
      personalDiaplay: [
        { title: '江戶時代那時的撒嬌', url: require('@/assets/avatar.jpg') },
        { title: '江戶時代那時的撒嬌', url: require('@/assets/avatar.jpg') },
        { title: '江戶時代那時的撒嬌', url: require('@/assets/avatar.jpg') },
        { title: '江戶時代那時的撒嬌', url: require('@/assets/avatar.jpg') },
        { title: '江戶時代那時的撒嬌', url: require('@/assets/avatar.jpg') }
      ]
    }
  },
  mounted() {
    // this.baseAddr = process.env.VUE_APP_SER_ADDR + manager
  },
  created() {
    this.sumLine()
  },
  methods: {
    videoSpring() {
      this.display = true
    },
    getMsgVideoSon(data) {
      this.display = data
    },
    sumLine() {
      if (parseInt(this.personalDiaplay.length / 3) > 3) {
        this.personalDiaplayLine = parseInt(this.personalDiaplay.length / 3)
      } else {
        this.personalDiaplayLine = 1
      }
    },
    load() {
      this.personalDiaplayLine += 2
    }
  }
}
</script>

<style  scoped>
*{
  list-style: none;
}
  .type-icon{
    display: inline-block;
    width: 12px;
    height: 12px;
  }
.displayVideo {
  width: 100%;
  height: 70vh;
  overflow: auto;
  // overflow-x: hidden;
  // overflow-y: auto;
  .personalDiaplayLine{
  display: block;
  width: 100%;
  height:100%;
  padding: 0 !important;
  margin-left: -1%;
  li:nth-of-type(1){
    margin-top: -1%;
    padding: 0 !important;
  }
  li{
    width: 100%;
    height: 30%;
    margin-top: 2.5%;
    ul{
      width: 100%;
      height: 100%;
       li:nth-of-type(1){
          margin-top: 2.5%;
        }
      li{
        width: 30%;
        margin-left: 2%;
        height: 100%;
        float: left;
        position: relative;
        top: -7.5%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        cursor: pointer;
        img{
          position: relative;
        }
        .play{
          width: 30px;
          height: 30px;
          position: absolute;
          top: 88%;
          left: 86%;
          cursor: pointer;
          z-index: 100;
        }
       p{
          margin: 0;
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #fdfbfb;
          background-color: rgb(42, 37, 37);
          text-align: left;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          position: absolute;
          top: calc(100% - 25px);
          left: 0;
          font-size: 14px;
          padding-left: 3%;
        }
      }
    }
  }
  }
}
.videospanclose:after {
  font-family: 'element-icons';
  position: absolute;
  top: 1vh;
  left: 90%;
  font-size: 20px;
  content: "\E6DB";
  cursor: pointer;
}

</style>
           

子元件

<template>
  <div>
    display:{{display}}
    <el-dialog
      :visible.sync="display"
      width="55%"
      @close="videoDisplayClose"
    >
      <div class="boxDisplay">
        <easy-player :video-url="videoUrl" :poster="videoImg" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import EasyPlayer from '@easydarwin/easyplayer'
import 'videojs-contrib-hls'
export default {
  components: { EasyPlayer },
  // eslint-disable-next-line vue/require-prop-types
  props: {
    display: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      CountTo: 0,
      videoUrl: require('@/assets/video/DPlayer.webm'),
      videoImg: require('@/assets/3.jpg')
    }
  },
  methods: {
    // 關閉事件
    videoDisplayClose() {
      // eslint-disable-next-line eqeqeq
      this.$emit('sendFVideo', false)
    }
  }
}
</script>
<style  scoped>
/deep/ .el-dialog{
color: white;
height: 60vh !important;
margin-top: 20vh !important;
position: relative;
}
.boxDisplay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}.test{
  width: 20px;
  height: 30px;
  background-color: antiquewhite;
  font-size: 20px;
  color: red;
}
</style>