npm install vue-cli -g
npm install (или вы можете использовать "npm install --registry=https://registry.npm.taobao.org" в Китае, чтобы улучшить скорость загрузки)
npm run dev
npm run dist
main.js
import Scrollbar from './components/scrollbar';
Vue.use(Scrollbar);
App.vue
@import './assets/scrollbar.css';
**.vue**
<template>
<Scrollbar class="my-scrollbar" classes="" styles="" v-bind:speed=100>
<div class="scroll-me"> //scrollbar должен иметь контейнер внутри в качестве корня
</div>
</Scrollbar>
</template>
<script>
</script>
Просто обычное имя класса для стилизации оболочки. Таким образом, он ПОЛНОСТЬЮ НАСТРАИВАЕМЫЙ!
/*The Wrapper*/
.my-scrollbar{
width: 35%;
min-width: 300px;
max-height: 450px;
}
/*The Content*/
.scroll-me{
min-width: 750px;
}
Если вы предпочитаете использовать встроенный стиль для стилизации полосы прокрутки, вы можете передать объект стиля этому реквизиту.
this.styling = {
/* Scrollbar */
scrollbar: {
width: "35%",
minWidth: "300px",
maxHeight: "450px"
},
}
<Scrollbar :styles="styling.scrollbar"></Scrollbar>
Шаг колеса в пикселях. По умолчанию это 53 пикселя на колесо.
Вы можете выполнить некоторые методы, обратившись к компоненту через JavaScript.
this.$refs.scrollbar.someMethod()
Прокрутить полосу прокрутки до Y
// Примеры
someMethod() {
this.$refs.Scrollbar.scrollToY(100)
}
Чтобы прокрутить полосу прокрутки до X
// Примеры
someMethod() {
this.$refs.Scrollbar.scrollToX(100)
}
Просто свяжитесь со мной по адресу:
опирайтесь на опыт vue2-scrollbar
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )