右侧边栏按钮组件

components/sidebar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="client-sidebar">
+      <ul>
+          <li><a><i></i></a></li>
+          <li><i @click="backTop"></i></li>
+      </ul>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'mtaSidebar',
+      // vue的两个生命钩子，这里不多解释。
+// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
+      mounted () {
+        window.addEventListener('scroll', this.scrollToTop)
+      },
+      destroyed () {
+        window.removeEventListener('scroll', this.scrollToTop)
+      },
+
+
+      methods: {
+        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
+        backTop() {
+          const that = this
+          let timer = setInterval(() => {
+            let ispeed = Math.floor(-that.scrollTop / 5)
+            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+            if (that.scrollTop === 0) {
+              clearInterval(timer)
+            }
+          }, 16)
+        },
+
+        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+        scrollToTop() {
+          const that = this
+          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+          that.scrollTop = scrollTop
+          if (that.scrollTop > 60) {
+            that.btnFlag = true
+          } else {
+            that.btnFlag = false
+          }
+        }
+      }
+      };
+</script>
+
+<style lang="scss" scoped>
+.client-sidebar{
+  display: none;
+    position: fixed;
+    z-index: 100;
+    top: 220px;
+    right: 0;
+    i{width: 50px;height: 50px;display: block;}
+    li:nth-child(1) i{background: pink;}
+    li:nth-child(2) i{background: green;}
+}
+</style>

layouts/templateA.vue

@@ -5,17 +5,20 @@
       <Nuxt />
     </div>
     <mtafooter></mtafooter>
+    <mtaSidebar></mtaSidebar>
   </div>
 </template>
 
 <script>
   import Mtafooter from '~/components/footer.vue'
   import Mtaheader from '~/components/header.vue'
+  import mtaSidebar from '~/components/sidebar.vue'
   export default {
     name:    'mtaFooter',
     components: {
       Mtafooter,
-      Mtaheader
+      Mtaheader,
+      mtaSidebar
     },
     //监测路由变化，滚动条置于最上方
     watch: {

layouts/templateB.vue

@@ -5,17 +5,20 @@
       <Nuxt />
     </div>
     <mtafooter></mtafooter>
+    <mtaSidebar></mtaSidebar>
   </div>
 </template>
 
 <script>
   import Mtafooter from '~/components/footer2.vue'
   import Mtaheader from '~/components/header.vue'
+  import mtaSidebar from '~/components/sidebar.vue'
   export default {
     name:    'mtaFooter',
     components: {
       Mtafooter,
-      Mtaheader
+      Mtaheader,
+      mtaSidebar
     },
     //监测路由变化，滚动条置于最上方
     watch: {