木灵鱼儿

木灵鱼儿

阅读：497

最后更新：2021/08/18/ 16:37:13

实现一个点击自动滚动到指定元素，并让input元素聚焦

效果图

f5nuqS.gif

思路分析

tab切换

在vue中，tab的切换只需要改动tab组件的active属性即可，所以，我们只需要对点击的元素，点击后能提供一个它奴属于哪个tab选中项即可。

具体就看自己的代码怎么设计，比如html元素可以使用data属性。

聚焦

聚焦就很简单了，input元素有focus方法，运行就会聚焦。

滑动定位

利用scrollIntoView方法，可以达到定位的效果，配置属性，就会有动画。

element.scrollIntoView({behavior:"smooth"})

MDN：Element.scrollIntoView()

点击这个元素，从data属性上获取要滚动的元素id，然后dom获取到这个元素，触发scrollIntoView。

聚焦的一些问题

事实上，如果我们不需要滑动定位的动画，可以不需要scrollIntoView，因为focus也能让元素自动滚动显示，只是没有动画而已。

但是如果两个一起使用，也会没有动画，因为focus自己有定位效果，所以，我们使用focus时还需要传入一个配置参数，让其不触发定位效果。

element.focus({ preventScroll: true });

我的源码

export default {
  methods: {
    //图形点击事件
    onShapeClick({ attrs }) {
      const { classify, id } = attrs;
      //切换tab
      classify && (this.activeName = classify);
      //滑动定位
      if (id) {
        this.$nextTick(() => {
          this.hashScrollPostion(`myKonva-${id}`);
          //聚焦
          const chindItem = this.$refs[`myKonva-${id}`][0];
          chindItem && chindItem.focus();
        });
      }
    },
    //hash滑动定位
    hashScrollPostion(id) {
      const dom = document.getElementById(id);
      dom && dom.scrollIntoView({ behavior: "smooth" });
    },
  
  }
}
export default {
  methods: {
    //focus选中input
    focus() {
      if (!this.$rightInput) this.$rightInput = this.$refs["rightInput"];
      const domInput = this.$rightInput.$el.querySelector("input");
      domInput && domInput.focus({ preventScroll: true }); //手动聚焦
    },
  
  }

}

由于在vue中，我使用了element框架，所以必须要获取到原生input才行，否则focus方法无法传入参数，即便传了也毫无效果。

注意点

由于tab的切换，dom需要一定时间渲染，如果在渲染之前我们就触发了定位操作，那么就会产生滑动定位无效，所以我们将滑动定位放在切换tab后的$nextTick里面，这样就能表示dom渲染后触发了。

文章分类 vue 项目实战
文章标签 滚动vue定位滑动定位聚焦选中
木灵鱼儿

木灵鱼儿

发布了 583 篇文章获得点赞 24获得阅读 497

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 24
文章被阅读 497

相关文章

meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法
不同平台的回车处理 warning Delete `␍` prettier prettier不同平台的回车处理 warning Delete `␍` prettier prettier
windows下软链接和硬链接windows下软链接和硬链接