• 父子组件


    /* 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=" 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>
     
     
    不求大富大贵,但求一生平凡
  • 相关阅读:
    前端css实现最基本的时间轴
    前端css实现最基本的时间轴
    那些年遇见的奇葩编程书籍封面
    那些年遇见的奇葩编程书籍封面
    2018年国内就业薪资高的7大编程语言排行
    乡愁
    乡愁
    微光系列之青春无敌美少女
    1287 矩阵乘法
    一些关于DP的知识
  • 原文地址:https://www.cnblogs.com/ylblogs/p/15424805.html
Copyright © 2020-2023  润新知