<style>
.st_box_img{
  width: 100%;height:100%;position: fixed;
  left:0px;top:0px;z-index:100;background:rgba(0,0,0,0.3);  
}
.st_box_img_bg-transition {
  opacity:1;
}
.st_box_img_bg-enter{ 
  animation: my_box_bg_kfshow 0.4s alternate ;
}
.st_box_img_bg-leave{ 
  animation: my_box_bg_kfhide 0.4s alternate 0.2s;
}
@keyframes my_box_bg_kfshow{
  from{opacity:0;}
  to{opacity:1}
}
@keyframes my_box_bg_kfhide{
  from{opacity:1;}
  to{opacity:0;}
}

.st_box_imgshow{
  transform:scale(1);
  -webkit-transition:all 0.2s ease-in;
}

.st_box_img_div1{
  width:800px;position:fixed;left:50%;z-index:101;
  top:100px;bottom:40px;background: #fff;margin-left:-400px;  
  display: flex;
    align-items: center;
}
.st_box_img_con-transition {
  transform:translate(0px,0%);
  transition:all .4s ease-in ;
}
.st_box_img_con-enter{  
  transform:translate(0px,-200%);
}
.st_box_img_con-leave{
  transition:all .4s ease-out ;
  transform:translate(0px,-200%);
}




.st_box_img_close{
  width:40px;height:40px;border-radius:40px;background:#e8ebef;
  cursor:pointer;display:inline-block;
  position:absolute;right:10px;top:10px;
}
.st_box_img_close:before{
  content:"";width:24px;height:2px;background:#fff;position:absolute;
  left:8px;top:20px;transform:rotate(60deg);
  transform-origin: center center;
  transition:all .2s ease-out;
}
.st_box_img_close:after{
  content:"";width:24px;height:2px;background:#fff;
  position:absolute;left:8px;top:20px;transform:rotate(-60deg);
  transform-origin: center center;
  transition:all .2s ease-out;
}
.st_box_img_close:hover:before{
  transform:rotate(45deg);
}
.st_box_img_close:hover:after{
  transform:rotate(-45deg);
}
.st_box_div3{
  flex:1;text-align: center;font-size:0px;
}
.st_box_img_img1{max-height:600px;}
.st_box_img_prev{position:absolute;left:20px;top:50%;width:20px;
  height:40px;cursor:pointer;text-indent: 100em;margin-top:-20px;
}
.st_box_img_prev:before{
  content:"";width:20px;height:2px;background: #babfc3;
  position:absolute;left:6px;top:20px;
  transform-origin: left bottom;
  transform:rotate(-70deg);transition:all .2s linear;
}
.st_box_img_prev:after{
  content:"";width:20px;height:2px;background: #babfc3;
  position:absolute;left:6px;top:20px;
  transform-origin:left top ;
  transform:rotate(70deg);transition:all .2s linear;
}
.st_box_img_prev:hover:before{
  transform:rotate(-50deg);
}   
.st_box_img_prev:hover:after{
  transform:rotate(50deg);
}

.st_box_img_next{position: absolute;right:20px;top:50%;
  width:20px; height:40px;
  cursor:pointer;text-indent: 100em;margin-top:-20px;
}
.st_box_img_next:before{
  content: ""; width: 20px;height: 2px;background: #babfc3;
    position: absolute;left: -6px;top: 20px;
    transform-origin: right bottom;
    transition: all .2s linear;
    transform: rotate(70deg);
}
.st_box_img_next:after{
  content:"";width:20px;height:2px;background: #babfc3;
  position:absolute;left:-6px;top:20px;
  transform-origin: right top;
  transition:all .2s linear;
  transform:rotate(-70deg);
}
.st_box_img_next:hover:before{
  transform:rotate(50deg);
}   
.st_box_img_next:hover:after{
  transform:rotate(-50deg);
}

.st_box_img_div4{position:absolute;left:0px;bottom:0px;width:100%;

background:rgba(0,0,0,0.5);z-index:102;}
.st_box_img_div4 p{padding:5px 0px;line-height: 20px;text-align:center;font-size:14px;margin:0px;color:#fff;}
</style>
<template>
  <div style="display:inline-block;float:left;" v-on:click="toggle">
    <slot></slot>
  </div>  
  <div class="st_box_img"
    v-show="proshow" transition="st_box_img_bg"
  >
    
  </div>
  <div class="st_box_img_div1" 
    v-show="proshow" transition="st_box_img_con"
  >
    <span class="st_box_img_close"  v-on:click="toggle"></span>
    <div class="st_box_div3">
      <!-- v-bind:src="imgarr[index]"  -->
      <img v-bind:src="showobj.img"
      v-bind:style="styleobj"
      class="st_box_img_img1" style="height:auto;max-width: 800px;margin:auto;"/>
    </div>  
    <div class="st_box_img_div4" v-show="showobj.txt!=''">
      <p>{{showobj.txt}}</p>
    </div>
    <span v-on:click="prev" v-show="num>1 && index>0"
    class="st_box_img_prev">prev</span>
    <span v-on:click="next" v-show="num>1 && index<num-1"
    class="st_box_img_next">next</span>   
  </div>
</template>

<script>
module.exports={
  data:function(){
    return {
      index:0,num:1,proshow:0,
      showobj:{img:'',txt:''},
      styleobj:{
        maxHeight:'0px'
      }
    }
  },props:{//尽量为props设置默认值 如果在ready内使用的话
    imgarr:{type:Array,default:[]}
  },watch:{
    'imgarr':function(val){

      this.proshow=Number(this.proshow)
      this.num=this.imgarr.length;
      this.index=0;
      this.setshowobj();
    }
  },methods:{
    toggle:function(){
      this.proshow=!this.proshow;

    },prev:function(){
      if(this.index>0){
        this.index-=1;
        this.setshowobj();
      }
    },next:function(){
      if(this.index<this.num-1){
        this.index+=1;
        this.setshowobj();
      }
    },setshowobj:function(){
      if(this.num>0){
        if(typeof this.imgarr[this.index]=="string"){
          this.showobj.img=this.imgarr[this.index]; 
          this.showobj.txt='';      
        }else{
          this.showobj.img=this.imgarr[this.index].img;
          this.showobj.txt=this.imgarr[this.index].txt;
        }

      }
    }
  },created:function(){

  },ready:function(){//获取页面高
    var h=(document.body.clientHeight ||
    document.documentElement.clientHeight)-140+'px';
    this.styleobj.maxHeight=h;  
    this.proshow=Number(this.proshow)
    this.num=this.imgarr.length;

    this.setshowobj();
  },beforeDestroy:function(){   
    //
  }
}
</script>