elementui按钮回到顶部

ElementUI提供了一个Backtop组件,可以实现回到顶部的功能。不过首页需要你页面内容足够多,出现滚动条才能看到效果。

使用方法如下:

在需要使用回到顶部功能的页面中引入Backtop组件:

<template>
  <div>
    <!-- 页面内容 -->
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import { Backtop } from 'element-ui';

export default {
  components: {
    'el-backtop': Backtop
  }
}
</script>

可以通过设置Backtop组件的属性来自定义样式和行为:

<el-backtop :visibility-height="100" :right="50" :bottom="50" :duration="1000">
  <i class="el-icon-arrow-up"></i>
</el-backtop>

 

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注