vue中点击按钮弹出视频

<div>

　　<button @click='checkVideoFun(item.video)'>点此观看完整视频</button> //外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗

　　<div class='mask' v-if='videoState == true' @click='masksCloseFun'></div> //弹窗

　　<div class="videomasks" v-if="videoState == true">

　　// 视频：h5的视频播放video

　　　　<video :src='videoSrc' controls='controls' autoplay>

　　</video>

　　</div>

</div>

<script>

export default{

　　data() {

　　　　return {

　　　　　　 videoSrc:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4',

　　　　　　 videoState:false,

　　　　　　}

　　　　 },

　　　　methods:{

　　　　　　 //点击按钮出现弹窗播放视频

　　　　　　checkVideoFun(videos){

　　　　　　　　this.videoState = true;

　　　　　　　　this.videoSrc = videos;

　　　　　　},

　　　　　　masksCloseFun(){

　　　　　　　　 this.videoState = false;

　　　　　　　　}

　　　　　　 }

　　　　 }

</script>

<style scoped>

.mask{

　　position:fixed;

　　top:0;

　　left:0;

　　bottom:0;

　　right:0;

　　z-index:10;

　　background-color: #000000;

　　opacity: .6; }

　　// 内容层 z-index要比遮罩大，否则会被遮盖

.videomasks{

　　max-width: 1200px;

　　position: fixed;

　　left: 50%;

　　top: 50%;

　　z-index: 20;

　　transform: translate(-50%,-50%); }

.videomasks video{

　　width: 100%;

　　height: 100%;

　　}

video:focus {

        // 隐藏轮廓

        // outline: auto 0px;

        outline: medium;

      }

</style>