1 <template>
2 <div>
3 <transition name="maskTransition">
4 <div class="alert" v-show="showValue" @click="handleShowValue()">
5 <span class="iconfont icon"></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" alt="">
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 // }
转载于:https://www.cnblogs.com/QQPrincekin/p/11541225.html
相关资源：JAVA上百实例源码以及开源项目
