Vue中实现Alert组件显示时自动滚动到自身的方案咨询

我刚好遇到过类似的场景，给你几个靠谱的方案，亲测有效：

方案一：在封装的Alert组件内部处理（最优雅） #

把滚动逻辑封装到Alert组件里，父组件只需要控制show属性就行，不用额外写代码。核心思路是监听show属性的变化，当它变为true时，等DOM更新完成后调用原生的scrollIntoView方法实现平滑滚动。

代码示例：

<template>
  <b-alert :show="show" :variant="variant" class="alert-custom">{{ text }}</b-alert>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      required: true
    },
    variant: {
      type: String,
      default: 'info'
    }
  },
  watch: {
    show(newShowState) {
      if (newShowState) {
        // 必须用$nextTick等待DOM渲染完成，否则元素可能还没显示，滚动无效
        this.$nextTick(() => {
          this.$el.scrollIntoView({
            behavior: 'smooth', // 平滑滚动，替换成'auto'就是瞬间跳转
            block: 'center'     // 元素居中显示，可选'start'（顶部对齐）、'end'（底部对齐）
          });
        });
      }
    }
  }
};
</script>

方案二：在父组件中监听并处理 #

如果不想修改封装的Alert组件，可以在父组件中通过ref获取组件实例，然后监听show属性变化来触发滚动：

代码示例：

<template>
  <div class="page-content">
    <!-- 页面其他内容 -->
    <my-alert ref="alertInstance" :show="isAlertShow" :text="alertText" :variant="alertType"></my-alert>
  </div>
</template>

<script>
import MyAlert from '@/components/MyAlert.vue';

export default {
  components: { MyAlert },
  data() {
    return {
      isAlertShow: false,
      alertText: '',
      alertType: 'info'
    };
  },
  watch: {
    isAlertShow(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // 获取Alert组件的根DOM元素
          const alertElement = this.$refs.alertInstance.$el;
          alertElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        });
      }
    }
  },
  methods: {
    triggerAlert() {
      this.alertText = '这是一条需要用户注意的提示信息';
      this.alertType = 'warning';
      this.isAlertShow = true;
    }
  }
};
</script>

为什么之前的尝试没生效？ #

• vue-scrollto不生效：大概率是没有等待DOM更新完成就调用了滚动方法，或者没有正确指向Alert组件的DOM元素，用$nextTick包裹应该能解决。
• scroll(0,0)的问题：这个方法是直接滚动到页面顶部，当然不会定位到Alert组件，而scrollIntoView是原生API，能自动计算元素的位置并滚动过去，还支持平滑动画。

兼容性说明 #

scrollIntoView的behavior: 'smooth'在现代浏览器（Chrome、Firefox、Edge等）都支持，如果需要兼容IE，可以去掉这个参数（默认是auto，瞬间跳转），或者引入对应的polyfill。

内容的提问来源于stack exchange，提问作者LakiGeri