模拟双击事件以及图片放大基点问题

Posted 2020-11-13 qqprincekin

  1 <template>
  2   <div>
  3     <transition name="maskTransition">
  4       <div class="alert" v-show="showValue" @click="handleShowValue()">
  5         <span class="iconfont icon">&#xe66a;</span>
  6       </div>
  7     </transition>
  8     <transition name="dialogTransition">
  9       <div class="dialog" v-show="showValue">
 10         <div class="img-box" ref="ImgBox">
 11           <div class="event" :style="‘width:‘ + width + ‘%;‘" @click.self.stop="amplification($event)">
 12             <img :src="imgUrl" >
 13           </div>
 14         </div>
 15       </div>
 16     </transition>
 17   </div>
 18 </template>
 19 
 20 <script>
 21   import { clicking } from ‘../../common/isdbclick‘
 22 
 23   export default {
 24     name: ‘agreement‘,
 25     props: {
 26       imgUrl: String
 27     },
 28     data () {
 29       return {
 30         showValue: false,
 31         width: 100
 32       }
 33     },
 34     methods: {
 35       handleShowValue () {
 36         this.showValue = false
 37         this.$refs.ImgBox.scrollTop = 0
 38         this.$refs.ImgBox.scrollLeft = 0
 39         this.$nextTick(() => {
 40           this.width = 100
 41         })
 42       },
 43       amplification (event) {
 44         clicking(() => {
 45           let e = event || (event = window.event)
 46           let offsetX = e.offsetX
 47           let offsetY = e.offsetY
 48           if (this.width === 100) {
 49             this.width = 200
 50             this.$nextTick(() => {
 51               this.$refs.ImgBox.scrollTop = this.$refs.ImgBox.scrollTop * 2 + offsetY - this.$refs.ImgBox.scrollTop
 52               this.$refs.ImgBox.scrollLeft = this.$refs.ImgBox.scrollLeft * 2 + offsetX - this.$refs.ImgBox.scrollLeft
 53             })
 54           } else {
 55             this.$refs.ImgBox.scrollTop = this.$refs.ImgBox.scrollTop / 2 - (offsetY - this.$refs.ImgBox.scrollTop) / 2
 56             this.$refs.ImgBox.scrollLeft = this.$refs.ImgBox.scrollLeft / 2 - (offsetX - this.$refs.ImgBox.scrollLeft) / 2
 57             this.$nextTick(() => {
 58               this.width = 100
 59             })
 60           }
 61         })
 62       }
 63     }
 64   }
 65 </script>

clicking

 1 // isondbclick
 2 let clicked = 1
 3 let clickedTime = {
 4   timeA: ‘‘,
 5   timeB: ‘‘
 6 }
 7 export const clicking = function (callback) {
 8   if (clicked === 1) {
 9     clickedTime.timeA = new Date()
10     clicked++
11   } else if (clicked === 2) {
12     clickedTime.timeB = new Date()
13     if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 400) {
14       //  双击
15       callback()
16       clicked = 1
17     } else {
18       clickedTime.timeA = new Date()
19     }
20   }
21 }
22 
23 // const ju = true
24 // const dg = false
25 // export const clicking = function (callback) {
26 //   if (clicked === 1) {
27 //     // 单击
28 //     callback(dg)
29 //     clicked++
30 //   } else if (clicked === 2) {
31 //     clickedTime.timeA = new Date()
32 //     clicked++
33 //   } else if (clicked === 3) {
34 //     clickedTime.timeB = new Date()
35 //     if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 400) {
36 //       //  双击
37 //       callback(ju)
38 //       clicked = 1
39 //     } else {
40 //       clickedTime.timeA = new Date()
41 //     }
42 //   }
43 // }