0
点赞
收藏
分享

微信扫一扫

050_Backtop回到顶部

月白色的大狒 2022-03-11 阅读 149

1. Backtop回到顶部

1.1. Backtop返回页面顶部的操作按钮。

1.2. Attributes

参数

说明

类型

可选值

默认值

target

触发滚动的对象

string

visibility-height

滚动高度达到此参数值才出现

number

200

right

控制其显示位置, 距离页面右边距

number

40

bottom

控制其显示位置, 距离页面底部距离

number

40

1.3. Events

事件名

说明

回调参数

click

点击按钮触发的事件

点击事件

1.4. 注释: 不建议使用target属性, 极其难以使用。

2. Backtop回到顶部例子

2.1. 使用脚手架新建一个名为element-ui-backtop折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Backtop from '../components/Backtop.vue'
import MyselfBacktop from '../components/MyselfBacktop.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Backtop' },
  { path: '/Backtop', component: Backtop },
  { path: '/MyselfBacktop', component: MyselfBacktop }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Backtop.vue

<template>
  <div class="myPage">
    <h1>基础用法</h1>
    <h4>滑动页面即可看到右下方的按钮。</h4>
    <el-backtop :bottom="600"></el-backtop>
  </div>
</template>

<style scoped>
  .myPage {
    width: 100%;
    height: 1500px;
  }
  .myPage h1 {
    margin-top: 300px;
  }
</style>

2.4. 在components下创建MyselfBacktop.vue

<template>
  <div class="myPage">
    <h1>自定义显示内容</h1>
    <el-backtop :visibility-height="10" :bottom="600"><div class="up">UP</div></el-backtop>
  </div>
</template>

<style scoped>
  .myPage {
    width: 100%;
    height: 1500px;
  }
  .myPage .up {
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color: #1989fa;
  }
</style>

2.5. 运行项目, 访问http://localhost:8080/#/Backtop

2.6. 运行项目, 访问http://localhost:8080/#/MyselfBacktop 

举报

相关推荐

0 条评论