在Vue 单页面中做锚点定位

公司项目中，有个保存表单的页面有很多必填字段校验。而现在增加需求，点击保存的时候，自动跳转到必填的地方。撸起袖子干起来

将要跳转的HTML页面加个ref

<template>
  <div class="app-container calendar-list-container company-form">
    ...//省略
    <tr ref="trId">
                <td class="td-title">组织机构代码<span class="color-red">*</span></td>
                <td class="td-text">
                  <el-form-item prop="orgNo">
                    <el-input
                      :disabled="notEdit"
                      v-model="form.orgNo"
                      placeholder="组织机构代码"
                    ></el-input>
                  </el-form-item>
                </td>
        </tr>
    </div>
    ...
 </template>

跳转目标点方法

handleSave(formName) {
    this.$refs[formName].validate(valid => {
          if (valid) {
           //dosomething
          } else {
            //校验不通过跳转到目标
            let anchor = this.$refs.trId;
            this.$nextTick(() => {
             document.body.scrollTop=anchor.offsetTop
            });
            return false;
          }
        });
      }
}

运行预览， wtf，居然没效果。什么情况
很遗憾，打印出高度为0！！！！
很奇怪的问题。
最后一番折腾。监听高度啥的依然没效果。百度之，网上给出的所有解决方案都是一样的... 都是所DOCTYPE 是否指定类型了。
来去判断使用
document.body还是document.documentElement

以上方案不行，我就滚动当前的容器，chrome elements找到当前滚动的容器,重新撸如下：

 let anchor = this.$refs.trId.offsetTop;
 this.$nextTick(() => {
    document.querySelector(".scroll-container").scrollTop = anchor;
 });

重新运行预览，终于可以了！

重新整理:

页面有很多个必填项，如何处理呢?

this.$refs[formName].validate((valid, dom) => {
          if (valid) {
            //do
          } else {
            for (let key of Object.keys(dom)) {
              //获取ref dom 点进行锚点定位
              let anchor = this.$refs[key].offsetTop;
              this.$nextTick(() => {
                document.querySelector(".scroll-container").scrollTop = anchor;
              });
              break;
            }
            return false;
          }
        });

页面只需要ref的值与必填字段一致即可

在Vue 单页面中做锚点定位

猜你喜欢