1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <template>
| <view class="holdon">
| <image class="ball" :style="'left:'+(moveX == 0 & x>0? x:moveX)+'px;top:'+(moveY == 0 & y>0? y:moveY)+'px'"
| @touchstart="drag_start" @touchmove.prevent="drag_hmove" :src="image" mode="aspectFill">
| </image>
| </view>
| </template>
|
| <script>
| export default {
| props: {
| x: {
| type: Number,
| default: 0
| },
| y: {
| type: Number,
| default: 0
| },
| image: {
| type: String,
| default: ''
| }
| },
| data() {
| return {
| start: [0, 0],
| moveY: 0,
| moveX: 0
| }
| },
| methods: {
| drag_start(event) {
| this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
| this.start[1] = event.touches[0].clientY - event.target.offsetTop;
| },
| drag_hmove(event) {
| let tag = event.touches;
| this.moveX = tag[0].clientX - this.start[0];
| this.moveY = tag[0].clientY - this.start[1];
| }
| }
| }
| </script>
|
| <style lang="less">
| .holdon {
| width: 100%;
| height: 100%;
| }
|
| .ball {
| // width: 70upx;
| // height: 70upx;
| // background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
| // border-radius: 50%;
| // box-shadow: 0 0 15upx #87CEFA;
| // color: #fff;
| // font-size: 30upx;
|
| width: 70px;
| height: 70px;
| border-radius: 50%;
| margin: auto;
| background: url('@/static/img/scan.png') no-repeat;
| box-shadow: #436df5 0px 0px 20px;
| background-size: 100% 100%;
|
| display: flex;
| justify-content: center;
| align-items: center;
| position: fixed !important;
| z-index: 1000000;
| }
| </style>
|
|
