You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<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>
|
|
|
|
|
|
|
