Vue之elementUi的backToTop组件（回到顶部）用法

最新推荐文章于 2024-05-08 17:25:47 发布

唐昊

最新推荐文章于 2024-05-08 17:25:47 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： logging # Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_44763595/article/details/119302367

logging 同时被 2 个专栏收录

70 篇文章

订阅专栏

Vue

28 篇文章

订阅专栏

本文介绍如何使用 Element UI 的回到顶部组件，并通过定制样式实现更好的用户体验。包括组件的基本用法、属性配置及样式调整等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-tooltip placement="top" content="回到顶部">
    <back-to-top :custom-style="myBackToTopStyle"
                 :visibility-height="300" :back-position="0" transition-name="fade"/>
  </el-tooltip>
</template>

<script>
  import  BackToTop from '../../../node_modules/element-ui/packages/backtop/index'
  export default {
    name:"app",
    components: {BackToTop },
    data() {
      return {
        myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        borderRadius: '4px',
        lineHeight: '45px' // 请保持与高度一致以垂直居中 background: '#e7eaf1'// 按钮的背景颜色
         
        }
      };
    }
  };
</script>