element-plus/backtop.md at 70ebeaaedcaed896cb2246eb72fd45c4ab3742f7

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 09:20:51 +08:00

* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console

2021-09-04 19:29:28 +08:00

1.9 KiB

Raw Blame History

Backtop

Un botón para volver a la parte superior

Uso básico

Desplácese hacia abajo para ver el botón en el lado inferior derecho. :::demo

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

:::

Personalización

Área de visualización de 40px * 40px. :::demo

<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>

:::

Atributos

Atributos	Descripción	Tipo	Por defecto
target	el objetivo para activar el scroll	string
visibility-height	el botón no se mostrará hasta que la altura de desplazamiento alcance este valor	number	200
right	separación desde la derecha	number	40
bottom	separación desde abajo	number	40

Eventos

Nombre del evento	Descripción	Parámetros
click	se activa al hacer clic	click event

1.9 KiB Raw Blame History