Vue 의 el-scrollbar 사용자 정의 스크롤 실현

왜 엘-scrollbar 를 써 야 합 니까?
최근 에 내부 플랫폼 시스템 을 쓰 고 있 습 니 다.그 중에서 사용자 정의 스크롤 영역 이 많 을 것 이 라 고 믿 습 니 다.예 를 들 어 현재 스크롤 해 야 할 목록 이 있 습 니 다.첫 번 째 생각 은 overflow:scroll 입 니 다.아!응응,못 쓰 는 것 도 아니 고!만약 내 가 태양 을 본 적 이 없다 면,나 는 어둠 을 참 을 수 있 었 을 것 이다.
사람들 은 항상 많은 스크롤 바 가 비교적 우아 하 게 실현 되 는 것 을 볼 수 있 을 것 이다.아름다움 은 사람 을 즐겁게 하 는 것 임 을 부인 할 수 없다.그래서 요 몇 년 동안 강 호 를 돌아 다 니 면서 나 는 죄책 감 을 느 꼈 고 모두 에 게 추 태 를 보 였 다.
왜 el-scrollbar 를 사용 하 는 지 모두 가 알 고 있 습 니 다.스크롤 을 모 의 하 는 것 은 어렵 지 않 고 시장 에 이런 라 이브 러 리 가 많 습 니 다.제 가 생각 한 것 은 우선 프로젝트 에 사용 되 는 프레임 워 크 는 Vue 이 고 그 다음 에 사용 하 는 구성 요소 라 이브 러 리 는 Element 입 니 다.Element 홈 페이지 에 도 스크롤 이 많 고 Select 구성 요소 의 드 롭 다운 상자 도 스크롤 이 있 기 때문에 선택 할 필요 가 없습니다.간단하게 Element 자신의 scrollbar 를 사용 하 세 요.다른 가방 이나 파일 같은 것 을 도입 하지 않 아 도 됩 니 다.
Element 홈 페이지 를 보면 Scrollbar 라 는 구성 요 소 를 발견 할 수 없습니다.문 서 를 사용 하지 않 았 지만 직접 사용 할 수 있 습 니 다.
왜 이 문장 을 써 야 합 니까?
첫째,한동안 글 을 쓰 지 않 았 으 니 손 을 데 워 라.
둘째,정말 어떤 학생 들 은 어떻게 사용 해 야 할 지 모 르 겠 어 요.주로 문서 가 없 나 봐 요.

일단 그 모습 부터 보 자.

효 과 를 보고 이 구성 요 소 를 어떻게 찾 는 지 보 세 요.공식 적 으로 문 서 를 제공 하지 않 았 지만 직접 사용 할 수 있 는 구성 요소 입 니 다.왜 그 러 세 요?엘 리 먼 트 프로젝트 의 기본 적 인 개념 부터 살 펴 보 겠 습 니 다.
Element 의 공헌 안내서 에서 개발 환경 구축 과 포장 코드 에 대한 지령 을 말 했다.포장 코드 는 npm run dist 를 사용 합 니 다.package.json 에 가면 이 명령 의 구체 적 인 조작 을 볼 수 있 습 니 다.

build/webpack.conf.js 라 는 파일 을 간단히 살 펴 보면 포 장 된 파일 입 구 는./src/index.js 입 니 다.이 파일 을 다시 보 러 가 겠 습 니 다.이 내용 은 vue 에 플러그 인 을 설치 하고 원형 에 마 운 트 대상 과 같은 작업 을 포함 하 는 것 을 제외 하고 플러그 인 방식 으로 Element 구성 요 소 를 등록 하 는 것 입 니 다.물론 패키지 방식 으로 설치 한 후에 사용 해 야 할 모든 방법 과 속성 도 드 러 납 니 다.사실 우 리 는 이미 Scrollbar 의 모습 을 보 았 다.packages/scrollbar/index.js'라 는 파일 을 살 펴 보고 이 구성 요 소 를 간단하게 도입 한 후 인 스타 그램 방법 을 추가 하여 Vue 에 제공 하 는 use 방법 을 사용 한 다음 에 직접 export 를 내 보 냅 니 다.

src/main.js 파일 에 가서 구성 요소 가 받 은 props 를 보 세 요.

native 속성:true 라면 엘 의 bar 를 표시 하지 않 습 니 다.즉,엘 이 모 의 한 스크롤 바 입 니 다.false 라면 모 의 스크롤 바 를 표시 합 니 다.
tag 라 는 속성 에 대해 서 는 엘 의 Select 구성 요소 에서 의 응용 을 볼 수 있 습 니 다.

그림 을 그 려 서 view 와 wrap 두 구역 의 차 이 를 표시 합 니 다.

써 보 세 요.
어떤 학우 들 은 때때로 위의 링크 를 열지 못 하고 코드 를 붙 이 는 것 을 고려한다.

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
 <h2>list:</h2>
 <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
 <div v-for="value in num" :key="vlaue">
  {{value}}
 </div>
 </el-scrollbar>
</div>


CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
#app {
 height: 300px;
 overflow: hidden;
}
/*       ，  200px     */
.list {
 max-height: 200px;
}


JavaScript

new Vue({
 el: "#app",
 data: {
 num: 30
 }
})

Element UI 공식 에 서 는 언제 문 서 를 업데이트 할 지 모 르 겠 지만 너무 간단 해서 그런 것 같 습 니 다.