VUE 控制el-tabs标签页切换后滚动条回到顶部

使用场景：标签页中内容较多时，滚动条滑到底部，切换tab后，滚动条还是在底部；预期：切换tab后滚动条能回到顶部代码实现：el-tabs 绑定点击事件 tabChange<el-tabs class="tabs" v-model="activeName" @tab-click="tabChange"><el-tab-pane label="交互规范" name="first"&g

花重锦

3046人浏览 · 2022-05-17 14:42:59

花重锦 · 2022-05-17 14:42:59 发布

使用场景：标签页中内容较多时，滚动条滑到底部，切换tab后，滚动条还是在底部；
预期：切换tab后滚动条能回到顶部

代码实现：el-tabs 绑定点击事件 tabChange

<el-tabs class="tabs" v-model="activeName" @tab-click="tabChange">
          <el-tab-pane label="交互规范" name="first">
            <ui-main></ui-main>
          </el-tab-pane>

          <el-tab-pane label="视觉规范" name="second">
            <ue-main></ue-main>
          </el-tab-pane>
        </el-tabs>

tab切换时设置

methods: {
    tabChange() {
      window.scrollTo(0, 0);
    },
  },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^