Element Backtop回到顶部的具体使用
更新时间:2020年07月27日 10:36:49 作者:ForeverJPB.
这篇文章主要介绍了Element Backtop回到顶部的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
组件— 回到顶部
基础用法

<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template>
自定义显示内容

<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
Attributes
Events

关于element-ui el-backtop返回顶部组件无效问题
el-backtop绑定的盒子,需要一个滚动样式:overflow-y: scroll;
<template>
<div id="app">
<router-view />
// 绑定app盒子
<el-backtop target="#app" :visibility-height="100"></el-backtop>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<style>
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
height: 100%;
/* 这里给app一个滚动效果 */
overflow-y: scroll;
}
</style>
到此这篇关于Element Backtop回到顶部的具体使用的文章就介绍到这了,更多相关Element Backtop回到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中使用vue-count-to(数字滚动插件)详细教程
这篇文章主要给大家介绍了关于Vue中使用vue-count-to(数字滚动插件)的相关资料,最近需要开发一个数字滚动效果,在网上找到一个关于vue-countTo的插件,觉得这个插件还不错,需要的朋友可以参考下2023-09-09
详解Vue中$props、$attrs和$listeners的使用方法
本文主要介绍了Vue中$props、$attrs和$listeners的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-12-12


最新评论