Skip to content

Commit cbc5c18

Browse files
dongsuoPanJiaChen
dongsuo
authored and
PanJiaChen
committed
'代码格式化'
1 parent 5069a4d commit cbc5c18

File tree

2 files changed

+101
-105
lines changed

2 files changed

+101
-105
lines changed

‎src/components/BackToTop/index.vue‎

Lines changed: 83 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -10,102 +10,101 @@
1010
</div>
1111
</transition>
1212
</template>
13+
1314
<script>
14-
export default {
15-
name: 'BackToTop',
16-
props: {
17-
visibilityHeight: {
18-
type: Number,
19-
default: 400
20-
},
21-
backPosition: {
22-
type: Number,
23-
default: 0
15+
export default {
16+
name: 'BackToTop',
17+
props: {
18+
visibilityHeight: {
19+
type: Number,
20+
default: 400
21+
},
22+
backPosition: {
23+
type: Number,
24+
default: 0
25+
},
26+
customStyle: {
27+
type: Object,
28+
default: {
29+
right: '50px',
30+
bottom: '50px',
31+
width: '40px',
32+
height: '40px',
33+
'border-radius': '4px',
34+
'line-height': '45px',
35+
background: '#e7eaf1'
36+
}
37+
},
38+
transitionName: {
39+
type: String,
40+
default: 'fade'
41+
}
2442
},
25-
customStyle: {
26-
type: Object,
27-
default: {
28-
right: '50px',
29-
bottom: '50px',
30-
width: '40px',
31-
height: '40px',
32-
'border-radius': '4px',
33-
'line-height': '40px',
34-
background: '#e7eaf1'
43+
data() {
44+
return {
45+
visible: false,
46+
interval: null
3547
}
3648
},
37-
transitionName: {
38-
type: String,
39-
default: 'fade'
40-
}
41-
42-
},
43-
data() {
44-
return {
45-
visible: false,
46-
interval: null
47-
}
48-
},
49-
mounted() {
50-
window.addEventListener('scroll', this.handleScroll);
51-
},
52-
beforeDestroy() {
53-
window.removeEventListener('scroll', this.handleScroll);
54-
if (this.interval) {
55-
clearInterval(this.interval);
56-
}
57-
},
58-
methods: {
59-
handleScroll() {
60-
this.visible = window.pageYOffset > this.visibilityHeight;
49+
mounted() {
50+
window.addEventListener('scroll', this.handleScroll);
6151
},
62-
backToTop() {
63-
const start = window.pageYOffset;
64-
let i = 0;
65-
this.interval = setInterval(() => {
66-
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
67-
if (next <= this.backPosition) {
68-
window.scrollTo(0, this.backPosition);
69-
clearInterval(this.interval)
70-
} else {
71-
window.scrollTo(0, next);
72-
}
73-
i++;
74-
}, 16.7)
52+
beforeDestroy() {
53+
window.removeEventListener('scroll', this.handleScroll);
54+
if (this.interval) {
55+
clearInterval(this.interval);
56+
}
7557
},
76-
easeInOutQuad(t, b, c, d) {
77-
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
78-
return -c / 2 * (--t * (t - 2) - 1) + b;
58+
methods: {
59+
handleScroll() {
60+
this.visible = window.pageYOffset > this.visibilityHeight;
61+
},
62+
backToTop() {
63+
const start = window.pageYOffset;
64+
let i = 0;
65+
this.interval = setInterval(() => {
66+
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
67+
if (next <= this.backPosition) {
68+
window.scrollTo(0, this.backPosition);
69+
clearInterval(this.interval)
70+
} else {
71+
window.scrollTo(0, next);
72+
}
73+
i++;
74+
}, 16.7)
75+
},
76+
easeInOutQuad(t, b, c, d) {
77+
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
78+
return -c / 2 * (--t * (t - 2) - 1) + b;
79+
}
7980
}
8081
}
81-
}
8282
</script>
83+
8384
<style scoped>
84-
.back-to-top {
85-
position: fixed;
86-
display: inline-block;
87-
text-align: center;
88-
cursor: pointer;
89-
}
85+
.back-to-top {
86+
position: fixed;
87+
display: inline-block;
88+
text-align: center;
89+
cursor: pointer;
90+
}
9091
91-
.back-to-top:hover {
92-
background: #d5dbe7;
93-
}
92+
.back-to-top:hover {
93+
background: #d5dbe7;
94+
}
9495
95-
.fade-enter-active,
96-
.fade-leave-active {
97-
transition: opacity .5s;
98-
}
96+
.fade-enter-active,
97+
.fade-leave-active {
98+
transition: opacity .5s;
99+
}
99100
100-
.fade-enter,
101-
.fade-leave-to {
102-
opacity: 0
103-
}
101+
.fade-enter,
102+
.fade-leave-to {
103+
opacity: 0
104+
}
104105
105-
.back-to-top .Icon {
106-
fill: #9aaabf;
107-
background: none;
108-
}
106+
.back-to-top .Icon {
107+
fill: #9aaabf;
108+
background: none;
109+
}
109110
</style>
110-
111-

‎src/views/components/backToTop.vue‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div class="components-container">
33
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
4-
<code>可自定义按钮的样式、show/hide临界点、返回的位置
5-
如需文字提示，可在外部使用Element的el-tooltip元素 </code>
4+
<code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
65
<div>我是占位</div>
76
<div>我是占位</div>
87
<div>我是占位</div>
@@ -130,29 +129,27 @@
130129
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
131130
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
132131
<el-tooltip placement="top" content="文字提示">
133-
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
132+
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
134133
</el-tooltip>
135134
</div>
136135
</template>
136+
137137
<script>
138-
import BackToTop from 'components/BackToTop';
139-
export default {
140-
components: { BackToTop },
141-
data() {
142-
return {
143-
myBackToTopStyle: {
144-
right: '50px',
145-
bottom: '50px',
146-
width: '40px',
147-
height: '40px',
148-
'border-radius': '4px',
149-
'line-height': '40px', // 请保持与高度一致以垂直居中
150-
background: '#e7eaf1'// 按钮的背景颜色
138+
import BackToTop from 'components/BackToTop';
139+
export default {
140+
components: { BackToTop },
141+
data() {
142+
return {
143+
myBackToTopStyle: {
144+
right: '50px',
145+
bottom: '50px',
146+
width: '40px',
147+
height: '40px',
148+
'border-radius': '4px',
149+
'line-height': '45px', // 请保持与高度一致以垂直居中
150+
background: '#e7eaf1'// 按钮的背景颜色
151+
}
151152
}
152153
}
153154
}
154-
}
155-
</script>
156-
<style scoped>
157-
158-
</style>
155+
</script>

0 commit comments

Comments
 (0)