Skip to content

beomy/vue-fast-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-fast-scroll

Android의 Fast Scroll을 Web 기반의 Vue.js에서 지원하기 위한 플러그인입니다.

Demo

CodePen.io

example 디렉토리 밑에 예제 파일로도 확인 할 수 있습니다.

Install

CDN

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/vue-fast-scoll.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/vue-fast-scroll.js"></script>
<script type="text/javascript">
    Vue.use(window.VueFastScroll)
</script>

NPM

npm install vue-fast-scroll
or
yarn add vue-fast-scroll

global

import Vue from 'vue'
import VueFastScroll from 'vue-fast-scroll'
import 'vue-fast-scroll/dist/css/vue-fast-scoll.css'

Vue.use(VueFastScroll)

local

import Vue from 'vue'
import { fastScroll } from 'vue-fast-scroll'
import 'vue-fast-scroll/dist/css/vue-fast-scoll.css'

export default {
  components: {
    fastScroll
  }
}

사용 설명

fast-scroll Component

fast-scroll 컴포넌트를 사용하여 그 안에 fast scroll을 지원해야 될 엘리먼트를 선언합니다. fast-scroll 컴포넌트는 key-list 프로퍼티를 가집니다.

<fast-scroll :key-list="fastScrollKeyList">
  ...
</fast-scroll>

key-list Property

key-list 프로퍼티로 전달 되어야 할 값은 keytext를 쌍으로 가지는 객체입니다.

fastScrollKeyList = {
  {key: 'ㄱ', text: 'ㄱ'},
  {key: 'ㄴ', text: 'ㄴ'},
  {key: 'ㄷ', text: 'ㄷ'},
  {key: 'ㄹ', text: 'ㄹ'},
  {key: 'ㅁ', text: 'ㅁ'},
  {key: 'ㅂ', text: 'ㅂ'},
  {key: 'ㅅ', text: 'ㅅ'},
  {key: 'ㅇ', text: 'ㅇ'},
  {key: 'ㅈ', text: 'ㅈ'},
  {key: 'ㅊ', text: 'ㅊ'},
  {key: 'ㅋ', text: 'ㅋ'},
  {key: 'ㅌ', text: 'ㅌ'},
  {key: 'ㅍ', text: 'ㅍ'},
  {key: 'ㅎ', text: 'ㅎ'}
}

위의 코드와 같이 key-list를 구성한다면, HTML에는

<div class="index-list">
  <ul>
    <li fast-scroll-key="ㄱ">ㄱ</li>
    <li fast-scroll-key="ㄴ">ㄴ</li>
    <li fast-scroll-key="ㄷ">ㄷ</li>
    <li fast-scroll-key="ㄹ">ㄹ</li>
    <li fast-scroll-key="ㅁ">ㅁ</li>
    <li fast-scroll-key="ㅂ">ㅂ</li>
    <li fast-scroll-key="ㅅ">ㅅ</li>
    <li fast-scroll-key="ㅇ">ㅇ</li>
    <li fast-scroll-key="ㅈ">ㅈ</li>
    <li fast-scroll-key="ㅊ">ㅊ</li>
    <li fast-scroll-key="ㅋ">ㅋ</li>
    <li fast-scroll-key="ㅌ">ㅌ</li>
    <li fast-scroll-key="ㅍ">ㅍ</li>
    <li fast-scroll-key="ㅎ">ㅎ</li>
  </ul>
</div>

위의 HTML이 랜더링 됩니다. 이 엘리먼트를 인덱스 리스트라고 하도록 하겠습니다. 인덱스 리스트는 fast scroll key 목록을 리스트로 나타내는 엘리먼트 입니다.

fast-scroll-key에는 key-list 프로퍼티 리스트 아이템의 key 값이 되고, li 태그의 문자열은 key-list 프로터티 리스트 아이템의 text가 됩니다.

fast-scroll Component의 Slot

fast-scroll 컴포넌트의 자식 컴포넌트로 scrollList라는 이름을 가지는 Slot을 정의해야 합니다. 이 Slot은 스크롤 될 엘리먼트가 됩니다. 이 엘리먼트를 스크롤 리스트라고 하도록 하겠습니다.

<fast-scroll>
  <ul slot="scrollList">
    ...
  </ul>
</fast-scroll>

fast-scroll-key Property

fast-scroll-key 프로퍼티는 스크롤 리스트 각각의 아이템에 선언되어야 하는 프로퍼티입니다.

fast-scroll 컴포넌트의 key-list 프로퍼티에 정의 된 keyfast-scroll 컴포넌트의 하위 컴포넌트에 정의 된 fast-scroll-key가 매칭 되는 엘리먼트를 찾아 스크롤 되게 됩니다.

<fast-scroll>
  <ul slot="scrollList">
    <li :fast-scroll-key="'ㄱ'">김치</li>
    ...
  </ul>
</fast-scroll>

Style

.scroll-list

Fast Scroll로 스크롤 될 스크롤 리스트의 스타일 클래스(<div class="scroll-list"></div>)입니다.

.index-list

Fast Scroll 할 keytext로 구성된 인덱스 리스트의 스타일 클래스(<div class="index-list"><ul>...</ul></div>)입니다.

.fast-scroll-toggle

어느 위치로 스크롤 되었는지 나타내는 문자열의 스타일 클래스(<div class="fast-scroll-toggle"></div>) 입니다.

.fade-leave-active, .fade-leave-to

어느 위치로 스크롤 되었는지 나타내는 문자열의 fade Animation 스타일 클래스 입니다.

Author

Hyo Bum Lee

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published