自定义一个回到顶部Vue指令

最新推荐文章于 2024-04-29 15:31:08 发布

图灵晚辈

最新推荐文章于 2024-04-29 15:31:08 发布

阅读量490

点赞数 2

分类专栏： VUE 文章标签： vue html js css javascript

本文链接：https://blog.csdn.net/weixin_45991188/article/details/106332470

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS样式：

<style>
     * {
       margin: 0;
       padding: 0;
     }
     html, body, #app {
       height: 100%;
     }
     #app {
       display: flex;
       flex-direction: column;
       overflow: hidden;
     }
     section {
       flex: 1;
       overflow-y: auto;
     }
     li {
       height: 28px;
       line-height: 28px;
       border-bottom: 1px solid #000000;
     }
     header, footer {
       height: 40px;
       background: red;
     }
     .gotop {
       width: 50px;
       height: 50px;
       position: fixed;
       bottom: 20px;
       right: 20px;
       border: 1px solid blue;;
       border-radius: 50%;
     }
</style>

<body>
    <div id="app">
      <header>头</header>
      <section v-gotop>
        <ul>
          <li v-for="item in 200" :key="item">{{ item }}</li>
        </ul>
        <!-- <div class="gotop" @click="goTop">goTop</div> -->
      </section>
      <footer>尾</footer>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
      // goTop 组件的配置对象
      const goTop = {
        data () {
          return {
            visible: false
          }
        },
        template: `
          <div v-show="visible" class="gotop" @click="goTop">点我</div>
        `,
        methods: {
        //点击回到顶部函数
          goTop () {
            this.$el.parentElement.scrollTop = 0
          }
        }
      }
      
        // 注册一个全局自定义指令 `v-gotop`
      Vue.directive('gotop', (el, binding) => {
        // 1. 使用 Vue.extend() 方法来扩展 Vue , 得到一个 Vue 子类
        const GoTop = Vue.extend(goTop)
        // 2. new GoTop 生成 GoTop 的实例
        const instance = new GoTop()
        // 3. instance.$mount() 进行挂载。但是不要提供挂载点。
        //    这个 instance 就有了 $el 属性
        instance.$mount()
        // 4. 就将这个 DOM 对象插入到 el 中
        el.appendChild(instance.$el)
        // 5. 当前元素的滚动条大于可视高度时，出现回到顶部的按钮
        el.addEventListener('scroll', () => {
          if (el.scrollTop >= el.clientHeight) {
            instance.visible = true
          } else {
            instance.visible = false
          }
        })
      })
      const vm = new Vue({
        el: '#app'
      })
    </script>
  </body>

图灵晚辈

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义一个回到顶部Vue指令

CSS样式：<style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { display: flex; flex-direction: column; overflow: hidden; } section { flex: 1;
复制链接

扫一扫

专栏目录