element ui backTop源码解析-逐行逐析

最新推荐文章于 2024-07-17 08:37:25 发布

丰的传说

最新推荐文章于 2024-07-17 08:37:25 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： element ui 源码逐行解析文章标签： ui vue.js 前端 element ui backtop

本文链接：https://blog.csdn.net/qq_42389674/article/details/135380576

backTop 回到顶部组件简介

基础概念

返回页面顶部的操作按钮

代码

<template>
  <div>
    <transition name="el-fade-in">
      <div
        v-if="visible"
        @click.stop="handleClick"
        :style="{
          'right': styleRight,
          'bottom': styleBottom
        }"
        class="el-backtop">
        <slot>
          <el-icon name="caret-top"></el-icon>
        </slot>
      </div>
      
    </transition>


  </div>
</template>

<script>
import throttle from 'throttle-debounce/throttle';

const cubic = value => Math.pow(value, 3);
// Math.pow(a,b) 用于计算指定值的次方值，此处是a的b次方
// 此处用到的是箭头函数
const easeInOutCubic = value => value < 0.5
  ? cubic(value * 2) / 2
  : 1 - cubic((1 - value) * 2) / 2;

export default {
     
     
  name: 'ElBacktop',
  props: {
     
     
    visibilityHeight: {
     
     //滚动达到此参数值才出现