Vueのカスタムスクロール、el-scrollbarを使います

更新し続けるgithubノートを手に入れて、行ってみることができて、誠意の作(もともと自分に書いたのですが......)リンクアドレス:Front-End-Basics
この文章の住所:Vueのカスタムスクロール、私はel-scrollbarを使います
ベースノートのgithubアドレス:https://github.com/qiqihaobenben/Front-End-Basicsあ、watchでもstarでもいいです.
本文は...
なぜel-scrollbarを使うのですか?
最近、内部プラットフォームシステムを書いています.誰もが知っていると思います.その中にはカスタムのスクロールエリアがたくさんあります.例えば、今リストをスクロールする必要があります.最初の考えはoverflow: scroll;ですね.うんうん、使えないわけじゃない!もし私が太陽を見たことがなければ、私は暗闇に耐えられるはずだった.
皆さんはいつも多くのスクロールバーの優雅な実現を見たことがあります.だからここ数年、江湖を歩いて罪悪感を抱いて、みんなに恥をかかせました.
なぜel-scrollbarを使うのか、スクロールをシミュレートするのは難しくなく、市販されているライブラリがたくさんあることはよく知られています.私が考えているのは、まずプロジェクト用のフレームワークがVueで、それから使うコンポーネントライブラリがElementで、Element公式サイトもスクロールがたくさんありますし、Selectコンポーネントのようなドロップダウンボックスもスクロールがあるので、何かを選ぶ必要はありません.簡単にElement独自のscrollbarを使いましょう.他のパッケージやファイルを導入する必要もありません.
Elementの公式サイトを見ると、Scrolbarというコンポーネントを見つけることはできません.ドキュメントは使用していませんが、直接使用することができます.
どうしてこの文章を書くのですか.

第一、しばらく物を書いていないので、先に手を温めます.

第二、本当にどのように使うことを知らない学友がいて、主にドキュメントがないかもしれません~

まずその様子を見てみましょう.
効果を見て、次にこのコンポーネントを見つける方法を見てみましょう.公式にはドキュメントは提供されていませんが、確かに直接利用できるコンポーネントです.どうしてそう言うのか、これは後で話します.まずElementプロジェクトの基本的な概念を少し見てみましょう.
Elementの貢献マニュアルでは,開発環境の構築とパッケージコードの命令について述べた.パッケージコードはnpm run distで、package.jsonに行ってこの命令の具体的な動作を見ることができます.build/webpack.conf.jsというファイルを簡単に見ると、パッケージされたファイルの入り口が./src/index.jsであることがわかります.もう一度このファイルを見に行きましょう.中身はvueにプラグインをインストールしたり、プロトタイプにオブジェクトをマウントしたりする操作のほか、プラグインでElementコンポーネントを登録して完成させることであり、もちろんインストールパッケージでインストールした後に使うすべての方法と属性も明らかになった.実は私たちはすでにScrollbarの姿を見ました.さらにpackages/scrollbar/index.js'というファイルを見て、簡単にこのコンポーネントを導入した後、installメソッドを追加し、Vueのuseメソッドに提供して使用し、そのままexportが出てきました.src/main.jsというファイルに行って、コンポーネントが受信したpropsを見てみましょう.
nativeプロパティ:trueであればelのbar、すなわちelがシミュレートしたスクロールバー、falseであればシミュレートしたスクロールバーを表示しません
tagという属性については,elのSelectコンポーネントでの応用を見ることができる.
図を描いてviewとwrapの2つの領域の違いを示します.
試しに使ってみる
表示されるリンク:el-scrollbar試用
一部の学生が上のリンクを開けられないことを考慮して、コードを貼り付けます.

HTML




  
list:
  
    

      {{value}}
    
  



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

ElementUIは にはいつドキュメントを するか かりませんが、 に すぎるからかもしれません.