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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <!--
| * @Author: 张嘉彬
| * @Date: 2021-10-22 17:14:55
| * @Description:
| -->
| <template>
| <div class="img_box 111" :style="{
| position: infoData.fixedPosition ? 'fixed' : 'absolute',
| top: infoData.codeY,
| left: infoData.codeX,
| zIndex: infoData.fixedPosition ? 99999 + infoData.z : infoData.z,
| width: infoData.width,
| height: showImg ? infoData.height : 0
| }" :class="showImg ? '' : 'fade_out'" @click="handleClick">
| <img v-if="(infoData.img || infoData.fileUrl)" v-lazy="infoData.img || infoData.fileUrl" alt=""
| :style="{
| width: infoData.width,
| height: showImg ? infoData.height : 0
| }" v-show="loadImg" @load="handleImgLoad" />
| <div :style="{
| width: infoData.width,
| height: infoData.height
| }" :class="['loading-img', 'spin-circle', 'looming-gray']"
| v-if="!loadImg&&(infoData.img || infoData.fileUrl)">
| </div>
| <img src="~@/assets/images/del1.png" mode="" class="common-base-icon diy_close_image" :style="{
| position: 'absolute',
| top: $setVw(5),
| right: $setVw(5),
| zIndex: infoData.z,
| zIndex: 9999,
| }" v-if="infoData.closeBtn" @click.stop="clickDel" />
| </div>
| </template>
| <script>
| export default {
| name: 'backToTop',
| props: {
| infoData: {
| type: Object,
| default: () => {
| return {}
| }
| }
| },
| data() {
| return {
| showImg: true,
| loadImg: false
| }
| },
| methods: {
| handleClick() {
| console.log("33333")
| window.scrollTo({
| top: 0,
| behavior: 'smooth'
| })
| },
| handleImgLoad(e) {
| this.loadImg = true
| },
| clickDel() {
| this.showImg = false
| }
| }
| }
| </script>
| <style scoped lang="scss">
| .fade_in {
| opacity: 1;
| }
|
| /* 加载失败、加载中的占位图样式控制 */
| .loadfail-img {
| width: 100%;
| height: 100%;
| }
|
| /* 动态灰色若隐若现 */
| .looming-gray {
| animation: looming-gray 1s infinite linear;
| background-color: #e3e3e3;
| }
|
| @keyframes looming-gray {
| 0% {
| background-color: #e3e3e3aa;
| }
|
| 50% {
| background-color: #e3e3e3;
| }
|
| 100% {
| background-color: #e3e3e3aa;
| }
| }
|
| /* 转圈 */
| .spin-circle {
| // background: url('@/static/easy-loadimage/loading.gif') no-repeat center;
| // background-size: cover;
| }
|
| img {
| -webkit-touch-callout: none;
| }
|
| .fade_out {
| transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
| opacity: 0;
| height: 0 !important;
| padding: 0;
| margin: 0;
| border: none !important;
| z-index: 102;
| }
|
| .del_icon {
| color: rgba(187, 173, 173, 0.5);
| }
| </style>
|
|
