父子组件

/* eslint-disable vue/require-prop-types */

子组件

<template>

  <a-modal

    :visible="show"

    width="780px"

    destroyOnClose

    :footer="null"

    @cancel="handleCancel"

  >

    <video

      ref="video"

      controlslist="nodownload noremoteplayback"

      controls

      autoplay

      loop

      style="width: 100%; height: auto; display: block"

      :src="datainfo"

    ></video>

  </a-modal>

</template>

 

<script>

export default {

  name: 'Lookvideo',

  components: {},

  data () {

    return {

    }

  },

  filters: {},

  created () {},

  computed: {},

  // eslint-disable-next-line vue/require-prop-types

  props: ['show', 'datainfo'],

  methods: {

    handleCancel (e) {

      this.$emit('fatherMethod')

    }

  }

}

</script>

 

<style lang="less" scoped>

 

</style>

父组件

 

<template>

 

    <lookvideo :show="visible" :datainfo="videoUrl" @fatherMethod="close"></lookvideo>

 

</template>

<script>

import lookvideo from '@/components/lookvideo.vue'

 

 

export default {

  name: 'TaskList',

  components: {

 

    lookvideo

  },

  data () {

 

    return {

   visible:false,

videoUrl:''

    }

  },

  filters: {},

  created () {},

  mounted () {

 

  },

  computed: {},

  methods: {

    lookVideo (text, record) {

      if (record.video_url === '') {

        // this.$message.warning('暂无视频可预览', 2)

        return

      }

      this.visible = true

      this.videoUrl = record.video_url

    },

    close () {

      this.visible = false

      this.videoUrl = ''

    }

  }

}

</script>

<style lang="less" scoped>

 

</style>

<style>

</style>