Пользовательская прокрутка Vue, я использую полосу прокрутки

внешний интерфейс GitHub Element Vue.js

Я получил заметку на github, которая постоянно обновляется, вы можете пойти и посмотреть ее, искренняя работа (изначально она была написана для меня...), адрес ссылки:Front-End-Basics

Адрес этой статьи:Пользовательская прокрутка Vue, я использую полосу прокрутки

Адрес github основных заметок:GitHub.com/issues книги…, вы можете смотреть, вы также можете звезды.


Текст начинается...

Зачем использовать полосу прокрутки?

Недавно я пишу внутреннюю систему платформы. Я думаю, все знают, что будет много настраиваемых областей прокрутки. Например, есть список, который нужно прокручивать. Первая идея - использоватьoverflow: scroll;какие! Хм, дело не в том, что его нельзя использовать! Если бы я не видел солнца, я мог бы вынести темноту.

Вы всегда будете видеть много элегантных реализаций полос прокрутки.Неоспоримо, что красота приятна. Поэтому я полон вины за то, что ходил по миру все эти годы, выставляя всех безобразными.

Зачем использовать el-scrollbar Все знают, что смоделировать прокрутку несложно, и таких библиотек на рынке много. То, что я рассмотрел, сначала использовало структуру, используемую в проекте, Vue, а затем используемую библиотеку компонентов — Element, Официальный веб-сайт Element также имеет много прокрутки, а раскрывающийся список, такой как компонент «Выбор», также имеет прокрутку, поэтому вам не нужно думать о том, что выбрать, это просто. Если вы хотите использовать собственную полосу прокрутки Element, вам не нужно вводить какие-либо другие пакеты или файлы.

На официальном сайте Element невозможно найти компонент Scrollbar, документации нет, но его можно использовать напрямую.

Зачем писать эту статью?

  • Во-первых, я ничего не писал какое-то время, так что давайте сначала разогреемся;
  • Во-вторых, действительно есть некоторые студенты, которые не знают, как его использовать, вероятно, в основном из-за отсутствия документации~

el-github

Давайте сначала посмотрим, как это выглядит.

Увидев эффект, давайте посмотрим, как найти этот компонент.Официальный документ не предоставлен, но это действительно компонент, доступный напрямую. Почему вы так говорите, мы поговорим об этом позже. Давайте сначала рассмотрим некоторые основные концепции проекта Element.

Инструкции по созданию среды разработки и кода упаковки описаны в руководстве по вкладам Element. для кода упаковкиnpm run dist,Поехалиpackage.jsonВы можете увидеть конкретную операцию этой команды.

Давайте просто посмотримbuild/webpack.conf.jsВ этом файле вы обнаружите, что запись упакованного файла./src/index.js, Давайте еще раз посмотрим на этот файл. Помимо установки плагинов для vue и монтирования объектов на прототипе, содержание в нем состоит в том, чтобы завершить регистрацию компонентов Element с помощью плагинов.Конечно, он также предоставляет все методы и свойства, которые будут использоваться после установка с помощью инсталляционных пакетов. На самом деле мы виделиScrollbarфигура. следуй за ним сноваpackages/scrollbar/index.js'В этом файле после простого введения этого компонента добавляется метод установки, который предоставляется методу использования Vue, а затем напрямую экспортируется.

идтиsrc/main.jsВ этом файле взгляните на свойства, которые получает компонент:

исконная собственность: еслиtrueНе отображается полоса el, то есть полоса прокрутки, имитируемая el, если онаfalseпоказать смоделированную полосу прокрутки

Что касается атрибута тега, вы можете взглянуть на приложение в выборе компонента EL.

Нарисуйте картинку, чтобы показать разницу между двумя областями просмотра и переноса:

попытайся

Ссылки для показа:пробная версия полосы прокрутки

Учитывая, что некоторые студенты иногда не могут открыть указанную выше ссылку, опубликуйте код.

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.9/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/element-ui@2.3.9/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 не уверены, когда документ будет обновлен, но это может быть связано с тем, что он слишком прост.

Категории