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>

 

版权声明:
作者:k, k
链接:http://kuyour.top/index.php/2023/04/18/elementui%e6%8c%89%e9%92%ae%e5%9b%9e%e5%88%b0%e9%a1%b6%e9%83%a8/
来源:KuKey
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
elementui按钮回到顶部
ElementUI提供了一个Backtop组件,可以实现回到顶部的功能。不过首页需要你页面内容足够多,出现滚动条才能看到效果。 使用方法如下: 在需要使用回到顶部功能……
<<上一篇
下一篇>>