欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui之關(guān)于組件BackToTop回到頂部的使用

 更新時(shí)間：2024年03月19日 09:38:00   作者：沏歡  
這篇文章主要介紹了element-ui之關(guān)于組件BackToTop回到頂部的使用,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element-ui組件BackToTop回到頂部的使用

詳細(xì)參數(shù)查看官網(wǎng)文檔BackToTop

方式1：直接添加使用

<div class="home">
	<el-backtop></el-backtop>
	<div class='content'></div>
</div>

方式2：添加target指定觸發(fā)的對象

<div class="layout">
	<el-backtop target=".layout"></el-backtop>
	<div class='content'></div>
</div>

注意：

1）使用時(shí)放在觸發(fā)滾動(dòng)的對象里的第一個(gè)div的位置（即最前面）

2）還是無效時(shí)可以選擇給觸發(fā)滾動(dòng)的對象添加以下樣式

.layout {
  height: 100vh;/*注意，這里設(shè)了這個(gè)高度后，后期給window注冊onscorll事件時(shí)，注冊不上*/
  overflow-x: hidden;
}

element回到頂部組件使用注意事項(xiàng)（Backtop 回到頂部）

官網(wǎng)里面這個(gè)Backtop 回到頂部組件使用寫的很簡單，就這樣


在這里插入圖片描述


在這里插入圖片描述

我們實(shí)際上使用這個(gè)組件，target對象是內(nèi)容滾動(dòng)的外部容器，并且這個(gè)容器的高度是100%是撐滿整個(gè)屏幕的

寫了個(gè)具體demo

例子如下：

<template>
  <!-- 外部容器 -->
  <div class="back-top-container">
    <!-- 實(shí)際滾動(dòng)內(nèi)容 -->
    <div v-for="(item,i) in 150" :key="i">這是文本{{ i }}</div>
    <!-- Backtop 回到頂部組件 -->
    <el-backtop target=".back-top-container" :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;
        margin-right:100px;
      }"
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.back-top-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>

效果圖

在這里插入圖片描述

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論