vue.js手机端图片点击放大展示代码免费下载

vue.js手机端图片点击放大展示代码,点击卡片里的图片,以弹出对话框形式打开,图像将放大展示。

JS代码

<script id="image-dialog" type="text/x-template"> 
  <div class="image-dialog"> 
    <button class="image-dialog-trigger" type="button" @click="showDialog"><img class="image-dialog-thumb" ref="thumb" :src="thumb"/></button> 
    <transition name="dialog" @enter="enter" @leave="leave"> 
      <div class="image-dialog-background" v-show="appearedDialog" ref="dialog"> 
        <button class="image-dialog-close" type="button" @click="hideDialog" aria-label="Close"></button><img class="image-dialog-animate" ref="animate" :class="{ loading: !loaded }" :src="loaded ? full : thumb"/><img class="image-dialog-full" ref="full" :src="appearedDialog && full" :width="fullWidth" :height="fullHeight" @load="onLoadFull"/> 
      </div> 
    </transition> 
  </div> 
</script> 
 
<script> 
Vue.component('image-dialog', { 
  template: '#image-dialog', 
   
  props: { 
    thumb: String, 
    full: String, 
    fullWidth: Number, 
    fullHeight: Number 
  }, 
   
  data () { 
    return { 
      loaded: false, 
      appearedDialog: false 
    } 
  }, 
   
  methods: { 
    showDialog () { 
      this.appearedDialog = true 
    }, 
     
    hideDialog () { 
      this.appearedDialog = false 
    }, 
     
    enter () { 
      this.animateImage( 
        this.$refs.thumb, 
        this.$refs.full 
      ) 
    }, 
     
    leave () { 
      this.animateImage( 
        this.$refs.full, 
        this.$refs.thumb 
      ) 
    }, 
     
    onLoadFull () { 
      this.loaded = true 
    }, 
   
    animateImage (startEl, destEl) { 
      const start = this.getBoundForDialog(startEl) 
      this.setStart(start) 
       
      this.$nextTick(() => { 
        const dest = this.getBoundForDialog(destEl) 
        this.setDestination(start, { 
          top: dest.top, 
          left: dest.left, 
          width: dest.width || this.fullWidth, 
          height: dest.height || this.fullHeight 
        }) 
      }) 
    }, 
     
    getBoundForDialog (el) { 
      const bound = el.getBoundingClientRect() 
      const dialog = this.$refs.dialog 
      return { 
        top: bound.top + dialog.scrollTop, 
        left: bound.left + dialog.scrollLeft, 
        width: bound.width, 
        height: bound.height 
      } 
    }, 
     
    setStart (start) { 
      const el = this.$refs.animate 
      el.style.left = start.left + 'px' 
      el.style.top = start.top + 'px' 
      el.style.width = start.width + 'px' 
      el.style.height = start.height + 'px' 
      el.style.transitionDuration = '0s' 
      el.style.transform = '' 
    }, 
     
    setDestination (start, dest) { 
      const el = this.$refs.animate 
      el.style.transitionDuration = '' 
       
      const translate = `translate(${dest.left - start.left}px, ${dest.top - start.top}px)` 
      const scale = `scale(${dest.width / start.width}, ${dest.height / start.height})` 
      el.style.transform = `${translate} ${scale}` 
    } 
  } 
}) 
 
new Vue({ 
  el: '#app' 
})</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录