v-scroll-auto
v-scroll-auto
Scroll auto for list.
Usage
Install
npm install --save v-scroll-auto
Global registration
import Vue from "vue";
import ScrollAuto from "v-scroll-auto";
Vue.use(ScrollAuto);
In-component registration
import ScrollAuto from "v-scroll-auto";
export default {
directives: {
ScrollAuto
}
};
Directive Attrs
value
- target element, example:<div v-scroll-auto='ul'><ul>...</ul></div>
- modifier
x
- use x axis, example:<ul v-scroll-auto.x>...</ul>
- argument - speed, example:
<ul v-scroll-auto:10></ul>
Complete example
<template>
<div>
<label>Default:</label>
<ul class="cm-list-unstyled cm-padding-medium" v-scroll-auto>
<li class="cm-margin-top-base" v-for="item in 5" :key="item">
<el-button>{{ item }}</el-button>
</li>
</ul>
<label>speed = 5, axis = x:</label>
<ul
class="cm-list-unstyled cm-flex cm-padding-large cm-border-base"
v-scroll-auto:5.x
>
<li v-for="item in 10" :key="item">
<el-button style="width: 200px;" type="primary">{{ item }}</el-button>
</li>
</ul>
</div>
</template>
<script>
import { ScrollAuto } from "v-scroll-auto";
export default {
directives: {
ScrollAuto
}
};
</script>
Dependencies
@types/jasmine: ^3.6.0@vue/cli-plugin-babel: ^4.5.9@vue/cli-plugin-eslint: ^4.5.9@vue/cli-plugin-typescript: ^4.5.9@vue/cli-service: ^4.5.9@vue/eslint-config-prettier: ^4.0.1@vue/eslint-config-typescript: ^4.0.0@yujinpan/common-modules: ^1.2.4babel-eslint: ^10.0.1babel-plugin-component: ^1.1.1core-js: ^3.8.3cross-env: ^5.2.0dotenv: ^8.0.0element-ui: ^2.xeslint: ^5.16.0eslint-plugin-prettier: ^3.1.0eslint-plugin-vue: ^5.0.0highlight-vue: ^1.0.0jasmine-core: ^3.6.0karma: ^5.2.3karma-chrome-launcher: ^3.1.0karma-jasmine: ^4.0.1karma-sourcemap-loader: ^0.3.8karma-webpack: ^4.0.2node-sass: ^4.12.0rollupx: ^1.1.8sass-loader: ^7.1.0typescript: ~3.9.3vue-cli-plugin-element: ^1.0.1vue-template-compiler: ^2.6.12webpack: ^4.44.2