BackTop 맨 위로

페이지 맨 위로 돌아가는 동작 버튼이에요.

출처: 문서

본문

언제 사용하나요

페이지 콘텐츠 영역이 quite 길 때, 사용자가 자주 맨 위로 올라가 내용을 확인해야 할 때 사용해요.

기본 사용법

맨 위로 버튼의 기본 스타일은 아래에서 50px, 오른쪽에서 30px 떨어진 곳에 있어요.

:::demo

<template>
  <div>
    <div>这里看不到我嘿嘿，下滑试试</div>
    <d-back-top />
    <d-back-top bottom="100px">
      <d-icon name="chevron-up"></d-icon>
    </d-back-top>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {
      msg: 'BackTop 回到顶部 组件文档示例',
    };
  },
});
</script>

<style></style>

:::

커스터마이즈

맨 위로 컴포넌트는 버튼 스타일을 커스터마이즈할 수 있고, 크기는 40px * 40px로 제한돼요. 동시에 class로 버튼 스타일을 취향대로 설정할 수도 있어요.

:::demo

<template>
  <div>
    <div>这里看不到我嘿嘿，下滑试试</div>
    <d-back-top bottom="100px">
      <d-icon name="chevron-up" color="#fff"></d-icon>
    </d-back-top>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {},
});
</script>

<style>
.devui-back-top .devui-backtop-custom {
  background-color: #5e7ce0;
}
</style>

:::

컨테이너 안에 넣기

target 파라미터를 설정하면 특정 컨테이너에 대해 맨 위로 동작을 할 수 있어요.

:::demo

<template>
  <div class="devui-scroll-container">
    <ul class="devui-scroll-content">
      <li class="backtop-demo-item" v-for="(item, index) of list" :key="item">
        {{ index + 1 + '. ' + item }}
      </li>
      <d-back-top target=".devui-scroll-content" :visibleHeight="100" bottom="5px" right="5px"></d-back-top>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const msg = 'DevUI倡导沉浸、灵活、至简的设计价值观';
    const list = [];
    for (let i = 0; i < 20; i++) {
      list.push(msg);
    }
    return {
      list,
    };
  },
});
</script>

<style>
.devui-scroll-container {
  width: 600px;
  height: 300px;
  margin-top: 20px;
}

.devui-scroll-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  list-style-type: none;
}

.backtop-demo-item {
  line-height: 35px;
  border-bottom: 1px solid #dfe1e6;
}
</style>

:::

BackTop 파라미터

더 알아보기 (Learn more)

스크롤 높이가 visibleHeight를 넘으면 버튼이 나타나요. bottom·right로 위치를 조정하고, target으로 특정 컨테이너 안에서도 쓸 수 있어요.