木灵鱼儿

木灵鱼儿

阅读:166

最后更新: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渲染后触发了。

版权申明

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

关于作者

站点职位 博主
获得点赞 23
文章被阅读 166

相关文章