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

来源:https://www.sucaihuo.com/js/3144.html 2017-10-17 18:09浏览(3919) 收藏

vue.js手机端图片点击放大展示代码,点击卡片里的图片,以弹出对话框形式打开,图像将放大展示。
vue.js手机端图片点击放大展示代码
分类:手机特效 > 弹出层 难易:初级
查看演示 下载资源: 53 下载资源 下载积分: 10 积分

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>
标签: 图片放大
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1206995177

  • 头像 3楼
    03-26 21:51
    蔬***M
    貌似很实用啊~~~!!!
  • 头像 板凳
    11-11 10:05
    f***6
    非常实用
  • 头像 椅子
    10-18 11:11
    ***g
    挺实用的,喜欢
  • 头像 沙发
    10-17 20:22
    W***歌
    抢先体验新代码
1 2