|
|
@@ -1,5 +1,8 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
-<div v-show="flag" class="backtop">
|
|
|
2
|
+<div v-show="flag" class="backtop1" v-if="isShow" >
|
|
|
3
|
+ <img @click="scrollToTop" class="backTopImg" src="../../static/icon/返回顶部@2x.png" alt="">
|
|
|
4
|
+</div>
|
|
|
5
|
+<div v-show="flag" class="backtop2" v-else >
|
|
3
|
6
|
<img @click="scrollToTop" class="backTopImg" src="../../static/icon/返回顶部@2x.png" alt="">
|
|
4
|
7
|
</div>
|
|
5
|
8
|
</template>
|
|
|
@@ -8,9 +11,11 @@
|
|
8
|
11
|
import { ref, reactive ,defineProps} from 'vue'
|
|
9
|
12
|
|
|
10
|
13
|
let flag = ref(false)
|
|
|
14
|
+let isShow = ref(true)
|
|
11
|
15
|
|
|
12
|
16
|
const props = defineProps({
|
|
13
|
|
- Scroll_X: Number
|
|
|
17
|
+ Scroll_X: Number,
|
|
|
18
|
+ isCss:Number
|
|
14
|
19
|
})
|
|
15
|
20
|
|
|
16
|
21
|
watch(()=>props.Scroll_X,()=>{
|
|
|
@@ -21,6 +26,16 @@ watch(()=>props.Scroll_X,()=>{
|
|
21
|
26
|
flag.value = false
|
|
22
|
27
|
}
|
|
23
|
28
|
})
|
|
|
29
|
+watch(()=>props.isCss,()=>{
|
|
|
30
|
+ if(props.isCss as number ===1){
|
|
|
31
|
+ isShow.value = true
|
|
|
32
|
+ }
|
|
|
33
|
+ if(props.isCss as number ===2){
|
|
|
34
|
+ isShow.value = false
|
|
|
35
|
+ }
|
|
|
36
|
+},
|
|
|
37
|
+{immediate:true}
|
|
|
38
|
+)
|
|
24
|
39
|
|
|
25
|
40
|
const scrollToTop = function () {
|
|
26
|
41
|
console.log('返回顶部');
|
|
|
@@ -33,7 +48,7 @@ const scrollToTop = function () {
|
|
33
|
48
|
</script>
|
|
34
|
49
|
|
|
35
|
50
|
<style scoped>
|
|
36
|
|
-.backtop{
|
|
|
51
|
+.backtop1{
|
|
37
|
52
|
width: 40px;
|
|
38
|
53
|
height: 40px;
|
|
39
|
54
|
position: fixed;
|
|
|
@@ -42,6 +57,15 @@ const scrollToTop = function () {
|
|
42
|
57
|
right: 15px;
|
|
43
|
58
|
bottom: 8%;
|
|
44
|
59
|
}
|
|
|
60
|
+.backtop2{
|
|
|
61
|
+ width: 40px;
|
|
|
62
|
+ height: 40px;
|
|
|
63
|
+ position: fixed;
|
|
|
64
|
+ border-radius: 50%;
|
|
|
65
|
+ z-index: 999;
|
|
|
66
|
+ right: 15px;
|
|
|
67
|
+ bottom: 14%;
|
|
|
68
|
+}
|
|
45
|
69
|
.backTopImg{
|
|
46
|
70
|
width: 40px;
|
|
47
|
71
|
height: 40px;
|