vue 中使用element-ui实现锚点定位表单

呆呆加油呀

已于 2024-07-02 18:37:49 修改

阅读量1.3k

点赞数 3

文章标签： vue.js ui 前端

于 2024-07-02 18:25:19 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59157023/article/details/140133760

版权

效果图：

代码：

html代码：

 <div class="content-left">
     <el-tabs :tab-position="'left'" @tab-click="goAnchor">
          <el-tab-pane  v-for="(item,index) in anchorNameList"
              v-anchor-scroll
              :key="index"
              :label="item.name"
              :id="item.value">
            </el-tab-pane>
      </el-tabs>
</div>

js:

 goAnchor(tab, event) {
        this.activeBtn = tab.index;
        document.querySelector(`.${tab.$attrs.id}`).scrollIntoView({behavior: 'smooth'});
   },

css：

  /deep/ .el-tabs {
            .el-tabs__item {
                font-family: PingFangSC-Regular;
                font-size: 16px;
                color: rgba(0,0,0,0.85);
                line-height: 40px;
                font-weight: 500;
                width: 150px;
                &:hover {
                    background-image: xxx
                    font-family: xxx;
                    font-size: 16px;
                    line-height: 40px;
                    font-weight: 600;
                    color: #4cb4dd; //#4cb5dd
                }
            }
            .el-tabs__active-bar {
                background-image: xxx
            }
            .el-tabs__item.is-active {
                background-image: xxx
                font-family: xxx;
                font-size: 16px;
                line-height: 40px;
                font-weight: 600;
                color: #4cb4dd; //#4cb5dd
            }
        }

参考原文：

vue 双向锚点实现简易版（scrollIntoView）_vue锚点定位双向滚动插件-优快云博客