vue中点击按钮弹出视频

vue中点击button按钮弹出视频

<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 标签。
		</video>
	</div>
</div>
<script>
	export default {
		 data() {
   			 return {
   			 videoSrc:'',
      		 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%;
  }
</style>

知识点总结一：

• v-if条件判断指令

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <p>哈哈哈！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

• v-else不能单独使用，必须紧跟在v-if 或者 v-else-if 的元素后面。

<div id="app">
    <p v-if="ok">看不到我</p>
    <p v-else>可以看到我 哈哈哈哈</p>
</div>
<script>
    var i=new Vue({
        el:"#app",
        data:{
            ok:false
        }
    })
</script>

• v-else-if跟在v-if指令后的条件判断，它可以连续多块使用。

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

知识点总结二：h5的video标签

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>