backtop 回到顶部

注意

滑动页面即可看到右下方的按钮。在项目 app.vue 文件下添加即可。显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。

用法

基础用法

vue

<template>
	<el-backtop></el-backtop>
</template>

自定义内容

vue

<template>
	<!-- 自定义显示内容   -->
	<el-backtop
		target=".page-component__scroll .el-scrollbar__wrap"
		:bottom="100"
	>
		<div class='top-btn'>UP</div>
	</el-backtop>
</template>

<style lang="less" scoped>
.top-btn {
	height: 100%;
	width: 100%;
	background-color: #f2f5f6;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
	text-align: center;
	line-height: 40px;
	color: #1989fa;
}
</style>

属性

参数	说明	类型	默认值
visibilityHeight	滚动高度达到此参数值才出现	Number	200
right	控制其显示位置, 距离页面右边距	Number	20
bottom	控制其显示位置, 距离页面底部距离	Number	100

方法

方法名	说明
$getModuleUrl	绑定到 Vue.prototype 上，根据模块名和 op 值查询对应模块的请求地址及权限，参数{moduleName,op}
$getModuleOpList	绑定到 Vue.prototype 上，根据模块名查询当前模块所有配置的 op，参数{moduleName}

backtop 回到顶部 ​

用法 ​

基础用法 ​

自定义内容 ​

属性 ​

方法 ​

backtop 回到顶部

用法

基础用法

自定义内容

属性

方法