在vue中使用elementUi的回到顶部backToTop组件

复制代码
 1 <template>
 2   <el-tooltip placement="top" content="回到顶部">
 3     <back-to-top :custom-style="myBackToTopStyle"
 4                  :visibility-height="300" :back-position="0" transition-name="fade"/>
 5   </el-tooltip>
 6 </template>
 7 <script>
 8   import  BackToTop from '../../../node_modules/element-ui/packages/backtop/index'
 9   export default {
10     name:"app",
11     components: { BackToTop},
12     data() {
13       return {
14         input: "",
15         myBackToTopStyle: {
16           right: '50px',
17           bottom: '50px',
18           width: '40px',
19           height: '40px',
20           borderRadius: '4px',
21           lineHeight: '45px', // 请保持与高度一致以垂直居中
22           background: '#e7eaf1'// 按钮的背景颜色
23         }
24       };
25     }
26   };
27 </script>
复制代码

 

posted @   shine_lovely  阅读(1103)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示