duoji-frontend/src/views/alarmVideos/model.vue

<template>
    <div v-if="isShow">
        <a-modal
            v-model="isShow"
            @cancel="handleCancel"
            :footer="null"
            :maskClosable="false"
            :bodyStyle="{padding:0}"
            :centered="true"
            class="video-model"
        >
            <div slot="closeIcon">
                <div class="video-close">
                    ╳
                </div>
            </div>
            <div class="test_two_box">
                <video
                    class="video-js"
                    :autoplay="true"
                    controls
                >
                    <source
                        :src="video1"
                        type="video/mp4"
                    >
                </video>
                <video
                   
                    class="video-js"
                    :autoplay="true"
                    controls
                >
                    <source
                        :src="video2"
                        type="video/mp4"
                    >
                </video>
            </div>
        </a-modal>
    </div>
</template>
<style lang="scss" scoped>
    .video-model {
        .across-layout {
            display: flex;
        }
    }

    .ant-btn {
        white-space: inherit;
        text-align: left;
    }

    .video-js {
        width: 100%;
        height: 300px;
    }

    .video-close {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #ffffff;
        font-size: 18px;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
</style>
<script>
export default {
    props: ['visible', 'vid1', 'vid2'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function (newVal) {
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        vid1: function (newVal) {
            
            this.video1 = newVal
            console.log(this.video1)
            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题

            })

        },
        vid2: function (newVal) {
            
            this.video2 = newVal
            console.log(this.video2)
            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题

            })

        },
    },
    data() {
        return {
            isShow: false,
            confirmLoading: false,
            video1: '',
            video2: '',
        };
    },
    mounted() {
        
    },
    methods: {
        handleCancel() {
            this.$emit('close', false, '')
        },

    },
};
</script>