'代码格式化'

src/components/BackToTop/index.vue

@@ -10,102 +10,101 @@
     </div>
   </transition>
 </template>
+
 <script>
-export default {
-  name: 'BackToTop',
-  props: {
-    visibilityHeight: {
-      type: Number,
-      default: 400
-    },
-    backPosition: {
-      type: Number,
-      default: 0
-    },
-    customStyle: {
-      type: Object,
-      default: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '40px',
-        background: '#e7eaf1'
+  export default {
+    name: 'BackToTop',
+    props: {
+      visibilityHeight: {
+        type: Number,
+        default: 400
+      },
+      backPosition: {
+        type: Number,
+        default: 0
+      },
+      customStyle: {
+        type: Object,
+        default: {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
+      },
+      transitionName: {
+        type: String,
+        default: 'fade'
       }
     },
-    transitionName: {
-      type: String,
-      default: 'fade'
-    }
-
-  },
-  data() {
-    return {
-      visible: false,
-      interval: null
-    }
-  },
-  mounted() {
-    window.addEventListener('scroll', this.handleScroll);
-  },
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll);
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  },
-  methods: {
-    handleScroll() {
-      this.visible = window.pageYOffset > this.visibilityHeight;
+    data() {
+      return {
+        visible: false,
+        interval: null
+      }
     },
-    backToTop() {
-      const start = window.pageYOffset;
-      let i = 0;
-      this.interval = setInterval(() => {
-        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
-        if (next <= this.backPosition) {
-          window.scrollTo(0, this.backPosition);
-          clearInterval(this.interval)
-        } else {
-          window.scrollTo(0, next);
-        }
-        i++;
-      }, 16.7)
+    mounted() {
+      window.addEventListener('scroll', this.handleScroll);
     },
-    easeInOutQuad(t, b, c, d) {
-      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
-      return -c / 2 * (--t * (t - 2) - 1) + b;
+    beforeDestroy() {
+      window.removeEventListener('scroll', this.handleScroll);
+      if (this.interval) {
+        clearInterval(this.interval);
+      }
+    },
+    methods: {
+      handleScroll() {
+        this.visible = window.pageYOffset > this.visibilityHeight;
+      },
+      backToTop() {
+        const start = window.pageYOffset;
+        let i = 0;
+        this.interval = setInterval(() => {
+          const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
+          if (next <= this.backPosition) {
+            window.scrollTo(0, this.backPosition);
+            clearInterval(this.interval)
+          } else {
+            window.scrollTo(0, next);
+          }
+          i++;
+        }, 16.7)
+      },
+      easeInOutQuad(t, b, c, d) {
+        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+        return -c / 2 * (--t * (t - 2) - 1) + b;
+      }
     }
   }
-}
 </script>
+
 <style scoped>
-.back-to-top {
-  position: fixed;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-}
+  .back-to-top {
+    position: fixed;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
 
-.back-to-top:hover {
-  background: #d5dbe7;
-}
+  .back-to-top:hover {
+    background: #d5dbe7;
+  }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .5s;
-}
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s;
+  }
 
-.fade-enter,
-.fade-leave-to {
-  opacity: 0
-}
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0
+  }
 
-.back-to-top .Icon {
-  fill: #9aaabf;
-  background: none;
-}
+  .back-to-top .Icon {
+    fill: #9aaabf;
+    background: none;
+  }
 </style>
-
-

src/views/components/backToTop.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="components-container">
     <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
-    <code>可自定义按钮的样式、show/hide临界点、返回的位置
-    如需文字提示，可在外部使用Element的el-tooltip元素   </code>
+    <code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
     <div>我是占位</div>
     <div>我是占位</div>
     <div>我是占位</div>
@@ -130,29 +129,27 @@
     <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
     <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
     <el-tooltip placement="top" content="文字提示">
-    <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
+      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
     </el-tooltip>
   </div>
 </template>
+
 <script>
-import BackToTop from 'components/BackToTop';
-export default {
-  components: { BackToTop },
-  data() {
-    return {
-      myBackToTopStyle: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '40px', // 请保持与高度一致以垂直居中
-        background: '#e7eaf1'// 按钮的背景颜色
+  import BackToTop from 'components/BackToTop';
+  export default {
+    components: { BackToTop },
+    data() {
+      return {
+        myBackToTopStyle: {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px', // 请保持与高度一致以垂直居中
+          background: '#e7eaf1'// 按钮的背景颜色
+        }
       }
     }
   }
-}
-</script>
-<style scoped>
-
-</style>
+  </script>