├── .gitignore ├── examples ├── dist │ ├── app.0614ed0d.js.gz │ ├── app.87e188a3.css │ └── app.0614ed0d.js ├── index.js ├── tpl.html └── app.vue ├── commitlint.config.js ├── postcss.config.js ├── .babelrc ├── test ├── utils.js ├── webpack.test.config.js ├── list.spec.js └── karma.conf.js ├── .travis.yml ├── src ├── index.js ├── list.less ├── debounce.js └── lazy-list.js ├── config └── index.js ├── index.html ├── .eslintrc ├── LICENSE ├── webpack.build.config.js ├── README.md ├── package.json └── dist └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | package-lock.json 4 | .cache 5 | .DS_Store -------------------------------------------------------------------------------- /examples/dist/app.0614ed0d.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dwqs/v2-lazy-list/HEAD/examples/dist/app.0614ed0d.js.gz -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-angular'], 3 | rules: { 4 | 'subject-case': [0] 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer')({ browsers: ['last 5 versions', 'Android >= 4.0', 'iOS >= 9'] }) 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import 'beautify-scrollbar/dist/index.css'; 4 | import V2LazyList from '../src/index'; 5 | 6 | import App from './app'; 7 | 8 | Vue.use(V2LazyList); 9 | 10 | new Vue({ 11 | el: '#app', 12 | render: (h) => h(App) 13 | }); 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", { 5 | "targets": { 6 | "browsers": ["last 5 versions", "safari > 8"] 7 | }, 8 | "modules": false, 9 | "loose": true 10 | } 11 | ], 12 | "stage-2" 13 | ] 14 | } -------------------------------------------------------------------------------- /test/utils.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import V2LazyList from 'main/index'; 3 | 4 | Vue.use(V2LazyList); 5 | 6 | export const createVM = (opts) => { 7 | return new Vue(opts).$mount(); 8 | }; 9 | 10 | export const destroyVM = (vm) => { 11 | vm.$destroy && vm.$destroy(); 12 | vm.$el && 13 | vm.$el.parentNode && 14 | vm.$el.parentNode.removeChild(vm.$el); 15 | }; 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | dist: trusty 4 | install: 5 | - npm install 6 | cache: 7 | directories: 8 | - node_modules 9 | addons: 10 | chrome: stable 11 | before_install: 12 | - export CHROME_BIN=chromium-browser 13 | - export DISPLAY=:99.0 14 | - sh -e /etc/init.d/xvfb start 15 | branches: 16 | only: 17 | - master 18 | node_js: 19 | - '8' 20 | script: 21 | - npm test -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './list.less'; 2 | import LazyList from './lazy-list.js'; 3 | 4 | function install (Vue) { 5 | if (Vue.version < 2.5) { 6 | throw new Error('Only adapted to Vue 2.5.0 or higher'); 7 | } 8 | Vue.component(LazyList.name, LazyList); 9 | } 10 | 11 | const V2LazyList = { 12 | install 13 | }; 14 | 15 | export default V2LazyList; 16 | 17 | if (typeof window !== 'undefined' && window.Vue) { 18 | window.Vue.use(V2LazyList); 19 | }; 20 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | dev: { 5 | env: 'development', 6 | assetsRoot: path.resolve(__dirname, '../examples/dist'), 7 | assetsPublicPath: '/v2-lazy-list/examples/dist/', 8 | contentBase: path.resolve(__dirname, '../examples/dist'), 9 | port: 3001 10 | }, 11 | build: { 12 | env: 'production', 13 | assetsRoot: path.resolve(__dirname, '../examples/dist'), 14 | assetsPublicPath: '/v2-lazy-list/examples/dist/' 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | V2 Lazy List Demo
-------------------------------------------------------------------------------- /examples/tpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | V2 Lazy List Demo 12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /src/list.less: -------------------------------------------------------------------------------- 1 | .v2-lazy-list-wrap { 2 | position: relative; 3 | box-sizing: border-box; 4 | width: 100%; 5 | overflow: hidden; 6 | // 此元素必须有 border 不然滚动有问题 7 | border: 1px solid #d1d5da; 8 | ul, ol { 9 | list-style: none; 10 | } 11 | } 12 | 13 | .v2-lazy-list { 14 | position: relative; 15 | width: 100%; 16 | height: 100%; 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: border-box; 20 | border: none; 21 | display: block; 22 | } 23 | 24 | .lazy-list-item { 25 | position: relative; 26 | display: block; 27 | width: 100%; 28 | box-sizing: border-box; 29 | border-bottom: 1px solid #d1d5da; 30 | line-height: normal; 31 | &:last-child { 32 | border-bottom: none; 33 | } 34 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | root: true, 3 | parser: "babel-eslint", 4 | parserOptions: { 5 | ecmaVersion: 7, 6 | sourceType: "module", 7 | allowImportExportEverywhere: false, 8 | ecmaFeatures: { 9 | jsx: true, 10 | modules: true 11 | } 12 | }, 13 | env: { 14 | es6: true, 15 | node: true, 16 | browser: true 17 | }, 18 | extends: "vue", 19 | rules: { 20 | indent: [2, 4, { "SwitchCase": 1 }], 21 | quotes: [2, "single", { "allowTemplateLiterals": true }], 22 | linebreak-style: [2, "unix"], 23 | semi: [2, "always"], 24 | eqeqeq: [2, "always"], 25 | strict: [2, "global"], 26 | key-spacing: [2, { "afterColon": true }], 27 | no-console: 0, 28 | no-debugger: 0, 29 | no-empty: 0, 30 | no-unused-vars: 0, 31 | no-constant-condition: 0, 32 | no-undef: 0, 33 | no-trailing-spaces: 0, 34 | no-unneeded-ternary: 0, 35 | new-cap: 0, 36 | no-self-compare: 0 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Pomy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/debounce.js: -------------------------------------------------------------------------------- 1 | const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'; 2 | const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox']; 3 | 4 | let timeoutDuration = 0; 5 | for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) { 6 | if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) { 7 | timeoutDuration = 1; 8 | break; 9 | } 10 | }; 11 | 12 | function microtaskDebounce (fn) { 13 | let called = false; 14 | return () => { 15 | if (called) { 16 | return; 17 | } 18 | called = true; 19 | window.Promise.resolve().then(() => { 20 | called = false; 21 | fn(); 22 | }); 23 | }; 24 | } 25 | 26 | function taskDebounce (fn) { 27 | let scheduled = false; 28 | return () => { 29 | if (!scheduled) { 30 | scheduled = true; 31 | setTimeout(() => { 32 | scheduled = false; 33 | fn(); 34 | }, timeoutDuration); 35 | } 36 | }; 37 | } 38 | 39 | const supportsMicroTasks = isBrowser && window.Promise; 40 | 41 | export default (supportsMicroTasks ? microtaskDebounce : taskDebounce); 42 | -------------------------------------------------------------------------------- /examples/dist/app.87e188a3.css: -------------------------------------------------------------------------------- 1 | .v2-lazy-list-wrap{position:relative;box-sizing:border-box;width:100%;overflow:hidden;border:1px solid #d1d5da}.v2-lazy-list-wrap ol,.v2-lazy-list-wrap ul{list-style:none}.v2-lazy-list{height:100%;margin:0;padding:0;border:none}.lazy-list-item,.v2-lazy-list{position:relative;width:100%;box-sizing:border-box;display:block}.lazy-list-item{border-bottom:1px solid #d1d5da;line-height:normal}.lazy-list-item:last-child{border-bottom:none}.beautify-scroll-container{position:relative!important;overflow:hidden!important;box-sizing:border-box!important;overflow-anchor:none}.beautify-scroll__x-bar,.beautify-scroll__y-bar{position:absolute;z-index:100;background-color:transparent}.beautify-scroll__y-bar{width:10px;top:0;right:0}.beautify-scroll__x-bar{height:10px;left:0;bottom:0}.beautify-scroll__x-thumb,.beautify-scroll__y-thumb{position:absolute;border-radius:6px;background-color:#b8b8b8;opacity:0;transition:all .2s linear}.beautify-scroll__x-thumb:hover,.beautify-scroll__y-thumb:hover{background-color:#777}.beautify-scroll__x-thumb.shown,.beautify-scroll__y-thumb.shown{opacity:1}.beautify-scroll__x-thumb.focus,.beautify-scroll__y-thumb.focus{opacity:1;background-color:#777}.beautify-scroll__x-thumb{height:7px;bottom:0}.beautify-scroll__y-thumb{width:7px;right:0} -------------------------------------------------------------------------------- /test/webpack.test.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: path.join(__dirname, '../src/index'), 6 | mode: 'development', 7 | module: { 8 | rules: [ 9 | { 10 | test: /\.vue$/, 11 | type: 'javascript/auto', 12 | loader: 'vue-loader' 13 | }, 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/, 17 | type: 'javascript/auto', 18 | loader: 'babel-loader' 19 | }, 20 | { 21 | test: /\.less$/, 22 | type: 'javascript/auto', 23 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 24 | }, 25 | { 26 | test: /\.css$/, 27 | type: 'javascript/auto', 28 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 29 | } 30 | ] 31 | }, 32 | resolve: { 33 | extensions: ['.js', '.vue'], 34 | alias: { 35 | 'main': path.resolve(__dirname, '../src'), 36 | 'vue$': 'vue/dist/vue.esm.js' 37 | }, 38 | modules: [path.join(__dirname, '../node_modules')] 39 | }, 40 | devtool: 'inline-source-map' 41 | }; -------------------------------------------------------------------------------- /test/list.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import { destroyVM, createVM } from './utils'; 4 | 5 | const getTestData = function (total) { 6 | const t = []; 7 | for (let i = 1; i <= total; i++) { 8 | t.push(i); 9 | } 10 | return t; 11 | }; 12 | 13 | describe('v2-lazy-list', () => { 14 | describe('rendering data is correct', () => { 15 | const vm = createVM({ 16 | template: ` 17 | 18 | `, 19 | 20 | created () { 21 | this.testData = getTestData(10); 22 | } 23 | }); 24 | 25 | it('item length in viewport', done => { 26 | setTimeout(() => { 27 | expect(vm.$el.querySelectorAll('.lazy-list-item')).to.have.lengthOf(Math.ceil(320 / 50)); 28 | done(); 29 | }, 10); 30 | }); 31 | 32 | it('content height & viewport height', done => { 33 | setTimeout(() => { 34 | expect(vm.$refs.list.contentHeight).to.eql(vm.testData.length * 50); 35 | expect(vm.$refs.list.viewportHeight).to.eql(320); 36 | done(); 37 | }, 10); 38 | }); 39 | 40 | it('scrollTop', done => { 41 | setTimeout(() => { 42 | expect(vm.$refs.list.scrollTop).to.eql(0); 43 | vm.$refs.list.scrollTop = 120; 44 | expect(vm.$refs.list.scrollTop).to.eql(120); 45 | expect(vm.$el.querySelectorAll('.lazy-list-item')).to.have.lengthOf(Math.ceil(320 / 50)); 46 | done(); 47 | }, 10); 48 | }); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const path = require('path'); 3 | 4 | const webpackTestConfig = require('./webpack.test.config'); 5 | /* eslint-disable */ 6 | let isCI = process.env.CONTINUOUS_INTEGRATION ? true : false; 7 | 8 | module.exports = config => { 9 | config.set({ 10 | frameworks: ['mocha', 'chai'], 11 | files: [ 12 | './list.spec.js' 13 | ], 14 | browsers: [isCI ? 'ChromeTravisCI' : 'Chrome'], 15 | customLaunchers: { 16 | ChromeTravisCI: { 17 | base: 'Chrome', 18 | flags: ['--no-sandbox'] 19 | } 20 | }, 21 | plugins: [ 22 | 'karma-chrome-launcher', 23 | 'karma-mocha', 24 | 'karma-sourcemap-loader', 25 | 'karma-webpack', 26 | 'karma-mocha-reporter', 27 | 'karma-chai' 28 | ], 29 | reporters: ['progress', 'mocha'], 30 | singleRun: true, 31 | autoRun: true, 32 | mochaReporter: { 33 | colors: { 34 | success: 'blue', 35 | info: 'bgGreen', 36 | warning: 'cyan', 37 | error: 'bgRed' 38 | }, 39 | symbols: { 40 | success: '+', 41 | info: '#', 42 | warning: '!', 43 | error: 'x' 44 | } 45 | }, 46 | coverageReporter: { 47 | dir: './coverage', 48 | reporters: [ 49 | { type: 'text-summary', subdir: '.' }, 50 | { type: 'lcov', subdir: '.' } 51 | ] 52 | }, 53 | preprocessors: { 54 | './list.spec.js': ['webpack', 'sourcemap'], 55 | }, 56 | logLevel: config.LOG_INFO, 57 | colors: true, 58 | webpack: webpackTestConfig, 59 | webpackMiddleware: { 60 | noInfo: true 61 | } 62 | }); 63 | }; 64 | -------------------------------------------------------------------------------- /webpack.build.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); 4 | const os = require('os'); 5 | const ProgressBarPlugin = require('progress-bar-webpack-plugin'); 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 7 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); 8 | 9 | module.exports = { 10 | mode: 'production', 11 | entry: { 12 | index: path.resolve(__dirname, './src/index') 13 | }, 14 | output: { 15 | path: path.join(__dirname, './dist'), 16 | filename: '[name].js', 17 | library: 'V2LazyList', 18 | libraryTarget: 'umd' 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.vue$/, 24 | type: 'javascript/auto', 25 | loader: 'vue-loader' 26 | }, 27 | { 28 | test: /\.js$/, 29 | type: 'javascript/auto', 30 | exclude: /node_modules/, 31 | loader: 'babel-loader' 32 | }, 33 | { 34 | test: /\.less$/, 35 | type: 'javascript/auto', 36 | use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'] 37 | } 38 | ] 39 | }, 40 | externals: { 41 | 'beautify-scrollbar': { 42 | root: 'BeautifyScrollbar', 43 | commonjs2: 'beautify-scrollbar', 44 | commonjs: 'beautify-scrollbar', 45 | amd: 'beautify-scrollbar' 46 | } 47 | }, 48 | plugins: [ 49 | // new ParallelUglifyPlugin({ 50 | // workerCount: os.cpus().length, 51 | // cacheDir: '.cache/', 52 | // sourceMap: true, 53 | // uglifyJS: { 54 | // compress: { 55 | // warnings: false, 56 | // /* eslint-disable */ 57 | // drop_debugger: true, 58 | // drop_console: true 59 | // }, 60 | // mangle: true 61 | // } 62 | // }), 63 | 64 | new ProgressBarPlugin() 65 | ] 66 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![webpack-4](https://img.shields.io/badge/webpack-4-brightgreen.svg) ![vue-version](https://img.shields.io/badge/vue-%3E%3D2.5.0-brightgreen.svg) ![license](https://img.shields.io/badge/license-MIT-brightgreen.svg) ![npm-version](https://img.shields.io/npm/v/v2-lazy-list.svg) [![build pass](https://api.travis-ci.org/dwqs/v2-lazy-list.svg?branch=master)](https://travis-ci.org/dwqs/v2-lazy-list?branch=master) 2 | # v2-lazy-list 3 | A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport. 4 | 5 | >v1.x is not maintained 6 | 7 | ## Installation 8 | 9 | npm: 10 | 11 | ``` 12 | npm i --save v2-lazy-list beautify-scrollbar 13 | ``` 14 | or yarn 15 | 16 | ``` 17 | yarn add v2-lazy-list beautify-scrollbar 18 | ``` 19 | 20 | ## Get Started 21 | 22 | ``` 23 | import Vue from 'vue'; 24 | import 'beautify-scrollbar/dist/index.css'; 25 | import V2LazyList from 'v2-lazy-list'; 26 | 27 | Vue.use(V2LazyList) 28 | 29 | 30 | ``` 31 | 32 | Visit the [examples](https://dwqs.github.io/v2-lazy-list/). 33 | 34 | ## Available Props 35 | | Attribute | Type | Accepted Values | Default | Description | 36 | | :--: | :--: | :--: | :--: | :--: | 37 | | data | Array | - | [] | the list data to render | 38 | | height | String/Number | - | 320 | the height of the content wrap element | 39 | | item-height | String/Number | - | 40 | the height of list item | 40 | | threshold | String/Number | - | 0 | the threshold value to trigger next-fetch in infinite scrolling | 41 | | tag | String | HTML tag name | 'ul' | container elment tag | 42 | | item-tag | String | HTML tag name | 'li' | item element tag | 43 | | mode | String | demand/lazy | 'demand' | render demand list or lazy list | 44 | 45 | ## Events 46 | | Event Name | Description | Parameters | 47 | | :--: | :--: | :--: | 48 | | reach-threshold | triggers when reaching threshold value| - | 49 | | scrolling | triggers when element is scrolling | - | 50 | | scroll-stop | triggers when element stop scroll | - | 51 | 52 | ## Development 53 | ``` 54 | git clone git@github.com:dwqs/v2-lazy-list.git 55 | 56 | cd v2-lazy-list 57 | 58 | npm i 59 | 60 | npm run dev 61 | ``` 62 | 63 | ## LICENSE 64 | MIT 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v2-lazy-list", 3 | "version": "2.2.5", 4 | "description": "A simple lazy load list component based Vue 2.x", 5 | "author": "dwqs", 6 | "license": "MIT", 7 | "main": "dist/index.js", 8 | "private": false, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/dwqs/v2-lazy-list.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/dwqs/v2-lazy-list/issues" 15 | }, 16 | "homepage": "https://github.com/dwqs/v2-lazy-list", 17 | "keywords": [ 18 | "lazy", 19 | "lazyload", 20 | "lazy-load-list", 21 | "vuejs2", 22 | "viewport" 23 | ], 24 | "files": [ 25 | "dist", 26 | "README.md", 27 | "package.json" 28 | ], 29 | "scripts": { 30 | "prepush": "npm run ilint -q", 31 | "prepublishOnly": "npm run build", 32 | "ilint": "npx eslint src/**/*.js src/**/*.vue", 33 | "fix": "npx eslint --fix src/**/*.js src/**/*.vue", 34 | "test": "npx karma start test/karma.conf.js --single-run", 35 | "commitmsg": "npx commitlint -e", 36 | "dev": "npx cross-env NODE_ENV=development node ./build/dev-server.js", 37 | "build": "rm -rf dist && npx cross-env NODE_ENV=production npx webpack --config ./webpack.build.config.js --hide-modules", 38 | "build:exam": "npx cross-env NODE_ENV=production npx webpack --config ./build/webpack.prod.config.js --hide-modules && mv ./examples/dist/index.html ./" 39 | }, 40 | "dependencies": { 41 | "raf": "^3.4.0" 42 | }, 43 | "peerDependencies": { 44 | "vue": ">= 2.5.0", 45 | "beautify-scrollbar": ">=1.0.2" 46 | }, 47 | "devDependencies": { 48 | "@commitlint/cli": "^6.1.2", 49 | "@commitlint/config-angular": "^6.1.2", 50 | "autoprefixer": "^8.0.0", 51 | "babel-core": "^6.26.0", 52 | "babel-eslint": "^8.2.2", 53 | "babel-loader": "^7.1.3", 54 | "babel-plugin-transform-runtime": "^6.23.0", 55 | "babel-preset-env": "^1.6.1", 56 | "babel-preset-stage-2": "^6.24.1", 57 | "beautify-scrollbar": "^1.0.6", 58 | "chai": "^4.1.2", 59 | "clean-webpack-plugin": "^0.1.18", 60 | "compression-webpack-plugin": "^1.1.9", 61 | "cross-env": "^5.0.5", 62 | "css-loader": "^0.28.10", 63 | "cssnano": "^3.10.0", 64 | "cz-conventional-changelog": "^2.1.0", 65 | "eslint": "^4.18.1", 66 | "eslint-config-vue": "^2.0.2", 67 | "eslint-plugin-vue": "^2.1.0", 68 | "extract-text-webpack-plugin": "^4.0.0-alpha.0", 69 | "html-webpack-plugin": "^3.2.0", 70 | "husky": "^0.14.3", 71 | "karma": "^2.0.0", 72 | "karma-chai": "^0.1.0", 73 | "karma-chrome-launcher": "^2.2.0", 74 | "karma-mocha": "^1.3.0", 75 | "karma-mocha-reporter": "^2.2.5", 76 | "karma-sourcemap-loader": "^0.3.7", 77 | "karma-webpack": "^2.0.13", 78 | "less": "^3.0.1", 79 | "less-loader": "^4.0.6", 80 | "mocha": "^5.0.1", 81 | "open-browser-webpack-plugin": "^0.0.5", 82 | "optimize-css-assets-webpack-plugin": "^3.2.0", 83 | "postcss-loader": "^2.1.1", 84 | "progress-bar-webpack-plugin": "^1.11.0", 85 | "vue": "^2.5.13", 86 | "vue-loader": "^14.1.1", 87 | "vue-style-loader": "^4.0.2", 88 | "vue-template-compiler": "^2.5.13", 89 | "webpack": "^4.0.0", 90 | "webpack-cli": "^2.0.9", 91 | "webpack-dev-server": "^3.0.0", 92 | "webpack-md5-hash": "^0.0.6", 93 | "webpack-parallel-uglify-plugin": "^1.0.2" 94 | }, 95 | "engines": { 96 | "node": ">= 6.0.0", 97 | "npm": ">= 5.2.0" 98 | }, 99 | "config": { 100 | "commitizen": { 101 | "path": "./node_modules/cz-conventional-changelog" 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/lazy-list.js: -------------------------------------------------------------------------------- 1 | import BeautifyScrollbar from 'beautify-scrollbar'; 2 | import raf from 'raf'; 3 | 4 | import debounce from './debounce'; 5 | 6 | const VOEWPORT_MIN_HEIGHT = 100; 7 | const ITEM_MIN_HEIGHT = 20; 8 | 9 | export default { 10 | name: 'v2-lazy-list', 11 | props: { 12 | data: { 13 | type: Array, 14 | default: () => [], 15 | required: true 16 | }, 17 | 18 | height: { 19 | type: [Number, String], 20 | default: VOEWPORT_MIN_HEIGHT 21 | }, 22 | 23 | itemHeight: { 24 | type: [Number, String], 25 | default: ITEM_MIN_HEIGHT * 2 26 | }, 27 | 28 | tag: { 29 | type: String, 30 | default: 'ul' 31 | }, 32 | 33 | itemTag: { 34 | type: String, 35 | default: 'li' 36 | }, 37 | 38 | threshold: { 39 | type: [Number, String], 40 | default: 0 41 | }, 42 | 43 | mode: { 44 | type: String, 45 | default: 'demand', 46 | validator: val => ['demand', 'lazy'].indexOf(val) > -1 47 | } 48 | }, 49 | 50 | data () { 51 | const ih = Number.parseInt(this.itemHeight, 10); 52 | const isPercent = String(this.height).indexOf('%') > -1; 53 | 54 | let vh = Number.parseInt(this.height, 10); 55 | 56 | if (isPercent) { 57 | vh = this.height; 58 | } else { 59 | vh = (Number.isNaN(vh) || vh < VOEWPORT_MIN_HEIGHT) ? VOEWPORT_MIN_HEIGHT : vh; 60 | } 61 | 62 | return { 63 | renderList: [], // on-demand render the list 64 | scrollTop: 0, 65 | isPercent: isPercent, 66 | 67 | // outside viewport 68 | viewportWith: 0, 69 | viewportHeight: vh, 70 | ih: (Number.isNaN(ih) || ih < ITEM_MIN_HEIGHT) ? ITEM_MIN_HEIGHT : ih, 71 | 72 | // inner content 73 | contentWidth: NaN, 74 | contentHeight: NaN, 75 | contentMarginTop: 0, 76 | 77 | scrollbar: null, 78 | wrapRect: null, 79 | isScrollToBottom: false 80 | }; 81 | }, 82 | 83 | watch: { 84 | data (val, oldVal) { 85 | this.initRenderList(); 86 | if (val.length !== oldVal.length) { 87 | this.updateScrollbar(); 88 | } 89 | }, 90 | 91 | scrollTop (val) { 92 | this.$emit('scrolling'); 93 | raf(this.updateRenderList); 94 | if (this.threshold > 0 && this.contentHeight - this.viewportHeight - val <= this.threshold) { 95 | this.reachThreshold(); 96 | } 97 | } 98 | }, 99 | 100 | provide () { 101 | return { 102 | list: this 103 | }; 104 | }, 105 | 106 | render (h) { 107 | if (!this.$h) { 108 | this.$h = h; 109 | } 110 | 111 | const children = h(this.tag, { 112 | class: { 113 | 'v2-lazy-list': true 114 | }, 115 | style: { 116 | marginTop: this.contentMarginTop + 'px' 117 | } 118 | }, this.renderList); 119 | 120 | return h('div', { 121 | class: { 122 | 'v2-lazy-list-wrap': true 123 | }, 124 | style: { 125 | height: this.isPercent ? this.viewportHeight : this.viewportHeight + 'px' 126 | } 127 | }, [children]); 128 | }, 129 | 130 | methods: { 131 | initRenderList () { 132 | this.contentHeight = Math.ceil(this.data.length * this.ih); 133 | if (this.mode === 'demand') { 134 | this.renderList = this.getDemandList(); 135 | } else if (this.mode === 'lazy') { 136 | this.renderList = this.getLazyList(); 137 | } 138 | }, 139 | 140 | updateRenderList () { 141 | if (this.mode === 'demand') { 142 | this.renderList = this.getDemandList(); 143 | } else if (this.mode === 'lazy') { 144 | this.renderList = this.getLazyList(); 145 | } 146 | }, 147 | 148 | updateScrollbar () { 149 | if (this.scrollbar) { 150 | this.$nextTick(() => { 151 | this.scrollbar.update({ 152 | contentHeight: this.contentHeight, 153 | isScrollToBottom: this.isScrollToBottom 154 | }); 155 | }); 156 | } 157 | }, 158 | 159 | // get demand list 160 | getDemandList () { 161 | const list = []; 162 | const vh = this.isPercent ? this.wrapRect.height : this.viewportHeight; 163 | 164 | let from = Math.floor(this.scrollTop / this.ih); 165 | const to = Math.ceil((this.scrollTop + vh) / this.ih); 166 | 167 | // fix: list is empty 168 | if (this.contentHeight < this.wrapRect.height) { 169 | from = 0; 170 | } 171 | 172 | for (let i = from; i < to; i++) { 173 | if (typeof this.data[i] !== 'undefined') { 174 | list.push( 175 | this.$h(this.itemTag, { 176 | class: { 177 | 'lazy-list-item': true 178 | }, 179 | style: { 180 | height: this.ih + 'px' 181 | } 182 | }, this.$scopedSlots.default ? this.$scopedSlots.default(this.data[i]) : [i]) 183 | ); 184 | } 185 | } 186 | this.contentMarginTop = from * this.ih; 187 | return list; 188 | }, 189 | 190 | // get lazy list 191 | getLazyList () { 192 | if (this.renderList.length === this.data.length) { 193 | return this.renderList; 194 | } 195 | 196 | const list = [].concat(this.renderList); 197 | const vh = this.isPercent ? this.wrapRect.height : this.viewportHeight; 198 | 199 | const from = list.length; 200 | const to = Math.ceil((this.scrollTop + vh) / this.ih); 201 | 202 | for (let i = from; i < to; i++) { 203 | if (typeof this.data[i] !== 'undefined') { 204 | list.push( 205 | this.$h(this.itemTag, { 206 | class: { 207 | 'lazy-list-item': true 208 | }, 209 | style: { 210 | height: this.ih + 'px' 211 | } 212 | }, this.$scopedSlots.default ? this.$scopedSlots.default(this.data[i]) : [i]) 213 | ); 214 | } 215 | } 216 | 217 | this.contentMarginTop = 0; 218 | return list; 219 | }, 220 | 221 | scrollStop () { 222 | this.$emit('scroll-stop'); 223 | }, 224 | 225 | updateScrollVal () { 226 | clearTimeout(this.timer); 227 | this.scrollTop = this.scrollbar.element.scrollTop; 228 | this.timer = setTimeout(() => { 229 | this.scrollStop(); 230 | }, 300); 231 | }, 232 | 233 | reachThreshold () { 234 | this.$emit('reach-threshold'); 235 | }, 236 | 237 | handleWinResize () { 238 | this.wrapRect = this.$el.getBoundingClientRect(); 239 | if (this.scrollbar.rect.height !== this.wrapRect.height) { 240 | this.updateRenderList(); 241 | this.updateScrollbar(); 242 | } 243 | } 244 | }, 245 | 246 | created () { 247 | this.winResize = debounce(this.handleWinResize); 248 | }, 249 | 250 | mounted () { 251 | this.viewportWith = this.$el.clientWidth; 252 | this.wrapRect = this.$el.getBoundingClientRect(); 253 | 254 | this.data.length && this.initRenderList(); 255 | this.$nextTick(() => { 256 | this.scrollbar = new BeautifyScrollbar(this.$el, { 257 | contentWidth: this.contentWidth, 258 | contentHeight: this.contentHeight 259 | }); 260 | this.$el.addEventListener('bs-update-scroll-value', this.updateScrollVal, false); 261 | this.$el.addEventListener('bs-y-reach-end', () => { 262 | this.isScrollToBottom = true; 263 | }, false); 264 | this.$el.addEventListener('bs-y-middle', () => { 265 | this.isScrollToBottom = false; 266 | }, false); 267 | }); 268 | 269 | window.addEventListener('resize', this.winResize, false); 270 | }, 271 | 272 | beforeDestroy () { 273 | this.scrollbar && this.scrollbar.destroy(); 274 | this.$el.removeEventListener('bs-update-scroll-value', this.updateScrollVal, false); 275 | this.$el.removeEventListener('bs-y-reach-end'); 276 | this.$el.removeEventListener('bs-y-middle'); 277 | window.removeEventListener('resize', this.winResize, false); 278 | } 279 | }; 280 | -------------------------------------------------------------------------------- /examples/app.vue: -------------------------------------------------------------------------------- 1 | 104 | 105 | 192 | 193 | 268 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("beautify-scrollbar")):"function"==typeof define&&define.amd?define(["beautify-scrollbar"],e):"object"==typeof exports?exports.V2LazyList=e(require("beautify-scrollbar")):t.V2LazyList=e(t.BeautifyScrollbar)}(window,function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(t,e,n){(function(e){for(var i=n(5),r="undefined"==typeof window?e:window,o=["moz","webkit"],s="AnimationFrame",a=r["request"+s],l=r["cancel"+s]||r["cancelRequest"+s],c=0;!a&&cn.parts.length&&(i.parts.length=n.parts.length)}else{var s=[];for(r=0;r=0){c=1;break}var h=a&&window.Promise?function(t){var e=!1;return function(){e||(e=!0,window.Promise.resolve().then(function(){e=!1,t()}))}}:function(t){var e=!1;return function(){e||(e=!0,setTimeout(function(){e=!1,t()},c))}},d={name:"v2-lazy-list",props:{data:{type:Array,default:function(){return[]},required:!0},height:{type:[Number,String],default:100},itemHeight:{type:[Number,String],default:40},tag:{type:String,default:"ul"},itemTag:{type:String,default:"li"},threshold:{type:[Number,String],default:0},mode:{type:String,default:"demand",validator:function(t){return["demand","lazy"].indexOf(t)>-1}}},data:function(){var t=Number.parseInt(this.itemHeight,10),e=String(this.height).indexOf("%")>-1,n=Number.parseInt(this.height,10);return{renderList:[],scrollTop:0,isPercent:e,viewportWith:0,viewportHeight:n=e?this.height:Number.isNaN(n)||n<100?100:n,ih:Number.isNaN(t)||t<20?20:t,contentWidth:NaN,contentHeight:NaN,contentMarginTop:0,scrollbar:null,wrapRect:null,isScrollToBottom:!1}},watch:{data:function(t,e){this.initRenderList(),t.length!==e.length&&this.updateScrollbar()},scrollTop:function(t){this.$emit("scrolling"),s()(this.updateRenderList),this.threshold>0&&this.contentHeight-this.viewportHeight-t<=this.threshold&&this.reachThreshold()}},provide:function(){return{list:this}},render:function(t){this.$h||(this.$h=t);var e=t(this.tag,{class:{"v2-lazy-list":!0},style:{marginTop:this.contentMarginTop+"px"}},this.renderList);return t("div",{class:{"v2-lazy-list-wrap":!0},style:{height:this.isPercent?this.viewportHeight:this.viewportHeight+"px"}},[e])},methods:{initRenderList:function(){this.contentHeight=Math.ceil(this.data.length*this.ih),"demand"===this.mode?this.renderList=this.getDemandList():"lazy"===this.mode&&(this.renderList=this.getLazyList())},updateRenderList:function(){"demand"===this.mode?this.renderList=this.getDemandList():"lazy"===this.mode&&(this.renderList=this.getLazyList())},updateScrollbar:function(){var t=this;this.scrollbar&&this.$nextTick(function(){t.scrollbar.update({contentHeight:t.contentHeight,isScrollToBottom:t.isScrollToBottom})})},getDemandList:function(){var t=[],e=this.isPercent?this.wrapRect.height:this.viewportHeight,n=Math.floor(this.scrollTop/this.ih),i=Math.ceil((this.scrollTop+e)/this.ih);this.contentHeight1)for(var n=1;n=0&&Math.floor(e)===e&&isFinite(t)}function d(t){return null==t?"":"object"==typeof t?JSON.stringify(t,null,2):String(t)}function h(t){var e=parseFloat(t);return isNaN(e)?t:e}function p(t,e){for(var n=Object.create(null),r=t.split(","),i=0;i-1)return t.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function _(t,e){return y.call(t,e)}function b(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var w=/-(\w)/g,x=b(function(t){return t.replace(w,function(t,e){return e?e.toUpperCase():""})}),T=b(function(t){return t.charAt(0).toUpperCase()+t.slice(1)}),C=/\B([A-Z])/g,$=b(function(t){return t.replace(C,"-$1").toLowerCase()});function S(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n}function L(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function k(t,e){for(var n in e)t[n]=e[n];return t}function A(t){for(var e={},n=0;n0,J=q&&q.indexOf("edge/")>0,G=q&&q.indexOf("android")>0||"android"===X,Z=q&&/iphone|ipad|ipod|ios/.test(q)||"ios"===X,Q=(q&&/chrome\/\d+/.test(q),{}.watch),tt=!1;if(W)try{var et={};Object.defineProperty(et,"passive",{get:function(){tt=!0}}),window.addEventListener("test-passive",null,et)}catch(t){}var nt=function(){return void 0===z&&(z=!W&&void 0!==t&&"server"===t.process.env.VUE_ENV),z},rt=W&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function it(t){return"function"==typeof t&&/native code/.test(t.toString())}var ot,at="undefined"!=typeof Symbol&&it(Symbol)&&"undefined"!=typeof Reflect&&it(Reflect.ownKeys);ot="undefined"!=typeof Set&&it(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var st=O,lt=0,ct=function(){this.id=lt++,this.subs=[]};ct.prototype.addSub=function(t){this.subs.push(t)},ct.prototype.removeSub=function(t){g(this.subs,t)},ct.prototype.depend=function(){ct.target&&ct.target.addDep(this)},ct.prototype.notify=function(){for(var t=this.subs.slice(),e=0,n=t.length;e0&&(oe((l=t(l,(n||"")+"_"+r))[0])&&oe(u)&&(f[c]=pt(u.text+l[0].text),l.shift()),f.push.apply(f,l)):s(l)?oe(u)?f[c]=pt(u.text+l):""!==l&&f.push(pt(l)):oe(l)&&oe(u)?f[c]=pt(u.text+l.text):(a(e._isVList)&&o(l.tag)&&i(l.key)&&o(n)&&(l.key="__vlist"+n+"_"+r+"__"),f.push(l)));return f}(t):void 0}function oe(t){return o(t)&&o(t.text)&&!1===t.isComment}function ae(t,e){return(t.__esModule||at&&"Module"===t[Symbol.toStringTag])&&(t=t.default),l(t)?e.extend(t):t}function se(t){return t.isComment&&t.asyncFactory}function le(t){if(Array.isArray(t))for(var e=0;eCe&&_e[n].id>t.id;)n--;_e.splice(n+1,0,t)}else _e.push(t);xe||(xe=!0,Kt($e))}}(this)},Le.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||l(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Ht(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},Le.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Le.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},Le.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||g(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var ke={enumerable:!0,configurable:!0,get:O,set:O};function Ae(t,e,n){ke.get=function(){return this[e][n]},ke.set=function(t){this[e][n]=t},Object.defineProperty(t,n,ke)}var Oe={lazy:!0};function Ee(t,e,n){var r=!nt();"function"==typeof n?(ke.get=r?Me(e):n,ke.set=O):(ke.get=n.get?r&&!1!==n.cache?Me(e):n.get:O,ke.set=n.set?n.set:O),Object.defineProperty(t,e,ke)}function Me(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),ct.target&&e.depend(),e.value}}function Ne(t,e,n,r){return u(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}function De(t,e){if(t){for(var n=Object.create(null),r=at?Reflect.ownKeys(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}):Object.keys(t),i=0;i=0||n.indexOf(t[i])<0)&&r.push(t[i]);return r}return t}function dn(t){this._init(t)}function hn(t){return t&&(t.Ctor.options.name||t.tag)}function pn(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!function(t){return"[object RegExp]"===c.call(t)}(t)&&t.test(e)}function vn(t,e){var n=t.cache,r=t.keys,i=t._vnode;for(var o in n){var a=n[o];if(a){var s=hn(a.componentOptions);s&&!e(s)&&mn(n,o,r,i)}}}function mn(t,e,n,r){var i=t[e];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),t[e]=null,g(n,e)}dn.prototype._init=function(t){var e,n,i,o,a=this;a._uid=cn++,a._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r,n._parentElm=e._parentElm,n._refElm=e._refElm;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(a,t):a.$options=Mt(un(a.constructor),t||{},a),a._renderProxy=a,a._self=a,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(a),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&fe(t,e)}(a),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,i=n&&n.context;t.$slots=de(e._renderChildren,i),t.$scopedSlots=r,t._c=function(e,n,r,i){return tn(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return tn(t,e,n,r,i,!0)};var o=n&&n.data;Tt(t,"$attrs",o&&o.attrs||r,0,!0),Tt(t,"$listeners",e._parentListeners||r,0,!0)}(a),ye(a,"beforeCreate"),(n=De((e=a).$options.inject,e))&&(bt.shouldConvert=!1,Object.keys(n).forEach(function(t){Tt(e,t,n[t])}),bt.shouldConvert=!0),function(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},i=t.$options._propKeys=[],o=!t.$parent;bt.shouldConvert=o;var a=function(o){i.push(o);var a=Dt(o,e,n,t);Tt(r,o,a),o in t||Ae(t,"_props",o)};for(var s in e)a(s);bt.shouldConvert=!0}(t,e.props),e.methods&&function(t,e){for(var n in t.$options.props,e)t[n]=null==e[n]?O:S(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;u(e=t._data="function"==typeof e?function(t,e){try{return t.call(e,e)}catch(t){return Ht(t,e,"data()"),{}}}(e,t):e||{})||(e={});for(var n,r=Object.keys(e),i=t.$options.props,o=(t.$options.methods,r.length);o--;){var a=r[o];i&&_(i,a)||36!==(n=(a+"").charCodeAt(0))&&95!==n&&Ae(t,"_data",a)}xt(e,!0)}(t):xt(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=nt();for(var i in e){var o=e[i],a="function"==typeof o?o:o.get;r||(n[i]=new Le(t,a||O,O,Oe)),i in t||Ee(t,i,o)}}(t,e.computed),e.watch&&e.watch!==Q&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var i=0;i1?L(n):n;for(var r=L(arguments,1),i=0,o=n.length;iparseInt(this.max)&&mn(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};gn=dn,_n={get:function(){return B}},Object.defineProperty(gn,"config",_n),gn.util={warn:st,extend:k,mergeOptions:Mt,defineReactive:Tt},gn.set=Ct,gn.delete=$t,gn.nextTick=Kt,gn.options=Object.create(null),H.forEach(function(t){gn.options[t+"s"]=Object.create(null)}),gn.options._base=gn,k(gn.options.components,wn),gn.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=L(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this},gn.mixin=function(t){return this.options=Mt(this.options,t),this},function(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,i=t._Ctor||(t._Ctor={});if(i[r])return i[r];var o=t.name||n.options.name,a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=Mt(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)Ae(t.prototype,"_props",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)Ee(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,H.forEach(function(t){a[t]=n[t]}),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=k({},a.options),i[r]=a,a}}(gn),yn=gn,H.forEach(function(t){yn[t]=function(e,n){return n?("component"===t&&u(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}),Object.defineProperty(dn.prototype,"$isServer",{get:nt}),Object.defineProperty(dn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),dn.version="2.5.13";var xn=p("style,class"),Tn=p("input,textarea,option,select,progress"),Cn=function(t,e,n){return"value"===n&&Tn(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},$n=p("contenteditable,draggable,spellcheck"),Sn=p("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Ln="http://www.w3.org/1999/xlink",kn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},An=function(t){return kn(t)?t.slice(6,t.length):""},On=function(t){return null==t||!1===t};function En(t,e){return{staticClass:Mn(t.staticClass,e.staticClass),class:o(t.class)?[t.class,e.class]:e.class}}function Mn(t,e){return t?e?t+" "+e:t:e||""}function Nn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,i=t.length;r=0&&" "===(v=t.charAt(p));p--);v&&dr.test(v)||(c=!0)}}else void 0===i?(h=r+1,i=t.slice(0,r).trim()):m();function m(){(o||(o=[])).push(t.slice(h,r).trim()),h=r+1}if(void 0===i?i=t.slice(0,r).trim():0!==h&&m(),o)for(r=0;r-1?{exp:t.slice(0,lr),key:'"'+t.slice(lr+1)+'"'}:{exp:t,key:null};for(ar=t,lr=cr=ur=0;!Sr();)Lr(sr=$r())?Ar(sr):91===sr&&kr(sr);return{exp:t.slice(0,cr),key:t.slice(cr+1,ur)}}(t);return null===n.key?t+"="+e:"$set("+n.exp+", "+n.key+", "+e+")"}function $r(){return ar.charCodeAt(++lr)}function Sr(){return lr>=or}function Lr(t){return 34===t||39===t}function kr(t){var e=1;for(cr=lr;!Sr();)if(Lr(t=$r()))Ar(t);else if(91===t&&e++,93===t&&e--,0===e){ur=lr;break}}function Ar(t){for(var e=t;!Sr()&&(t=$r())!==e;);}var Or,Er="__r",Mr="__c";function Nr(t,e,n,r,i){var o,a,s,l,c;e=(o=e)._withTask||(o._withTask=function(){Vt=!0;var t=o.apply(null,arguments);return Vt=!1,t}),n&&(a=e,s=t,l=r,c=Or,e=function t(){null!==a.apply(null,arguments)&&Dr(s,t,l,c)}),Or.addEventListener(t,e,tt?{capture:r,passive:i}:r)}function Dr(t,e,n,r){(r||Or).removeEventListener(t,e._withTask||e,n)}function jr(t,e){if(!i(t.data.on)||!i(e.data.on)){var n=e.data.on||{},r=t.data.on||{};Or=e.elm,function(t){if(o(t[Er])){var e=Y?"change":"input";t[e]=[].concat(t[Er],t[e]||[]),delete t[Er]}o(t[Mr])&&(t.change=[].concat(t[Mr],t.change||[]),delete t[Mr])}(n),ee(n,r,Nr,Dr,e.context),Or=void 0}}var Ir={create:jr,update:jr};function Hr(t,e){if(!i(t.data.domProps)||!i(e.data.domProps)){var n,r,a,s,l=e.elm,c=t.data.domProps||{},u=e.data.domProps||{};for(n in o(u.__ob__)&&(u=e.data.domProps=k({},u)),c)i(u[n])&&(l[n]="");for(n in u){if(r=u[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===c[n])continue;1===l.childNodes.length&&l.removeChild(l.childNodes[0])}if("value"===n){l._value=r;var f=i(r)?"":String(r);s=f,(a=l).composing||"OPTION"!==a.tagName&&!function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(a,s)&&!function(t,e){var n=t.value,r=t._vModifiers;if(o(r)){if(r.lazy)return!1;if(r.number)return h(n)!==h(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(a,s)||(l.value=f)}else l[n]=r}}}var Pr={create:Hr,update:Hr},Br=b(function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach(function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}}),e});function Rr(t){var e=zr(t.style);return t.staticStyle?k(t.staticStyle,e):e}function zr(t){return Array.isArray(t)?A(t):"string"==typeof t?Br(t):t}var Fr,Ur=/^--/,Wr=/\s*!important$/,Vr=function(t,e,n){if(Ur.test(e))t.style.setProperty(e,n);else if(Wr.test(n))t.style.setProperty(e,n.replace(Wr,""),"important");else{var r=qr(e);if(Array.isArray(n))for(var i=0,o=n.length;i-1?e.split(/\s+/).forEach(function(e){return t.classList.add(e)}):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function Gr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).forEach(function(e){return t.classList.remove(e)}):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function Zr(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&k(e,Qr(t.name||"v")),k(e,t),e}return"string"==typeof t?Qr(t):void 0}}var Qr=b(function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}}),ti=W&&!K,ei="transition",ni="animation",ri="transition",ii="transitionend",oi="animation",ai="animationend";ti&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(ri="WebkitTransition",ii="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(oi="WebkitAnimation",ai="webkitAnimationEnd"));var si=W?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function li(t){si(function(){si(t)})}function ci(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Jr(t,e))}function ui(t,e){t._transitionClasses&&g(t._transitionClasses,e),Gr(t,e)}function fi(t,e,n){var r=hi(t,e),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===ei?ii:ai,l=0,c=function(){t.removeEventListener(s,u),n()},u=function(e){e.target===t&&++l>=a&&c()};setTimeout(function(){l0&&(n=ei,u=a,f=o.length):e===ni?c>0&&(n=ni,u=c,f=l.length):f=(n=(u=Math.max(a,c))>0?a>c?ei:ni:null)?n===ei?o.length:l.length:0,{type:n,timeout:u,propCount:f,hasTransform:n===ei&&di.test(r[ri+"Property"])}}function pi(t,e){for(;t.length1}function bi(t,e){!0!==e.data.show&&mi(e)}var wi=function(t){var e,n,r={},l=t.modules,c=t.nodeOps;for(e=0;ep?_(t,i(n[g+1])?null:n[g+1].elm,n,h,g,r):h>g&&w(0,e,d,p)}(l,h,p,n,s):o(p)?(o(t.text)&&c.setTextContent(l,""),_(l,null,p,0,p.length-1,n)):o(h)?w(0,h,0,h.length-1):o(t.text)&&c.setTextContent(l,""):t.text!==e.text&&c.setTextContent(l,e.text),o(d)&&o(u=d.hook)&&o(u=u.postpatch)&&u(t,e)}}}function $(t,e,n){if(a(n)&&o(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r-1,a.selected!==o&&(a.selected=o);else if(N(Si(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));i||(t.selectedIndex=-1)}}function $i(t,e){return e.every(function(e){return!N(e,t)})}function Si(t){return"_value"in t?t._value:t.value}function Li(t){t.target.composing=!0}function ki(t){t.target.composing&&(t.target.composing=!1,Ai(t.target,"input"))}function Ai(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Oi(t){return!t.componentInstance||t.data&&t.data.transition?t:Oi(t.componentInstance._vnode)}var Ei={model:xi,show:{bind:function(t,e,n){var r=e.value,i=(n=Oi(n)).data&&n.data.transition,o=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&i?(n.data.show=!0,mi(n,function(){t.style.display=o})):t.style.display=r?o:"none"},update:function(t,e,n){var r=e.value;r!==e.oldValue&&((n=Oi(n)).data&&n.data.transition?(n.data.show=!0,r?mi(n,function(){t.style.display=t.__vOriginalDisplay}):gi(n,function(){t.style.display="none"})):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,i){i||(t.style.display=t.__vOriginalDisplay)}}},Mi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Ni(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Ni(le(e.children)):t}function Di(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var i=n._parentListeners;for(var o in i)e[x(o)]=i[o];return e}function ji(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var Ii={name:"transition",props:Mi,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(function(t){return t.tag||se(t)})).length){var r=this.mode,i=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return i;var o=Ni(i);if(!o)return i;if(this._leaving)return ji(t,i);var a="__transition-"+this._uid+"-";o.key=null==o.key?o.isComment?a+"comment":a+o.tag:s(o.key)?0===String(o.key).indexOf(a)?o.key:a+o.key:o.key;var l,c,u=(o.data||(o.data={})).transition=Di(this),f=this._vnode,d=Ni(f);if(o.data.directives&&o.data.directives.some(function(t){return"show"===t.name})&&(o.data.show=!0),d&&d.data&&(l=o,(c=d).key!==l.key||c.tag!==l.tag)&&!se(d)&&(!d.componentInstance||!d.componentInstance._vnode.isComment)){var h=d.data.transition=k({},u);if("out-in"===r)return this._leaving=!0,ne(h,"afterLeave",function(){e._leaving=!1,e.$forceUpdate()}),ji(t,i);if("in-out"===r){if(se(o))return f;var p,v=function(){p()};ne(u,"afterEnter",v),ne(u,"enterCancelled",v),ne(h,"delayLeave",function(t){p=t})}}return i}}},Hi=k({tag:String,moveClass:String},Mi);function Pi(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Bi(t){t.data.newPos=t.elm.getBoundingClientRect()}function Ri(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,i=e.top-n.top;if(r||i){t.data.moved=!0;var o=t.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}delete Hi.mode;var zi={Transition:Ii,TransitionGroup:{props:Hi,render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=Di(this),s=0;s-1?Bn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Bn[t]=/HTMLUnknownElement/.test(e.toString())},k(dn.options.directives,Ei),k(dn.options.components,zi),dn.prototype.__patch__=W?wi:O,dn.prototype.$mount=function(t,e){return r=t=t&&W?zn(t):void 0,i=e,(n=this).$el=r,n.$options.render||(n.$options.render=ht),ye(n,"beforeMount"),new Le(n,function(){n._update(n._render(),i)},O,null,!0),i=!1,null==n.$vnode&&(n._isMounted=!0,ye(n,"mounted")),n;var n,r,i},dn.nextTick(function(){B.devtools&&rt&&rt.emit("init",dn)},0);var Fi,Ui=/\{\{((?:.|\n)+?)\}\}/g,Wi=/[-.*+?^${}()|[\]\/\\]/g,Vi=b(function(t){var e=t[0].replace(Wi,"\\$&"),n=t[1].replace(Wi,"\\$&");return new RegExp(e+"((?:.|\\n)+?)"+n,"g")}),Xi={staticKeys:["staticClass"],transformNode:function(t,e){e.warn;var n=xr(t,"class");n&&(t.staticClass=JSON.stringify(n));var r=wr(t,"class",!1);r&&(t.classBinding=r)},genData:function(t){var e="";return t.staticClass&&(e+="staticClass:"+t.staticClass+","),t.classBinding&&(e+="class:"+t.classBinding+","),e}},qi={staticKeys:["staticStyle"],transformNode:function(t,e){e.warn;var n=xr(t,"style");n&&(t.staticStyle=JSON.stringify(Br(n)));var r=wr(t,"style",!1);r&&(t.styleBinding=r)},genData:function(t){var e="";return t.staticStyle&&(e+="staticStyle:"+t.staticStyle+","),t.styleBinding&&(e+="style:("+t.styleBinding+"),"),e}},Yi=p("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),Ki=p("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),Ji=p("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),Gi=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,Zi="[a-zA-Z_][\\w\\-\\.]*",Qi="((?:"+Zi+"\\:)?"+Zi+")",to=new RegExp("^<"+Qi),eo=/^\s*(\/?)>/,no=new RegExp("^<\\/"+Qi+"[^>]*>"),ro=/^]+>/i,io=/^/g,"$1").replace(//g,"$1")),xo(u,n)&&(n=n.slice(1)),e.chars&&e.chars(n),""});l+=t.length-d.length,t=d,S(u,l-c,l)}else{var h=t.indexOf("<");if(0===h){if(io.test(t)){var p=t.indexOf("--\x3e");if(p>=0){e.shouldKeepComment&&e.comment(t.substring(4,p)),T(p+3);continue}}if(oo.test(t)){var v=t.indexOf("]>");if(v>=0){T(v+2);continue}}var m=t.match(ro);if(m){T(m[0].length);continue}var g=t.match(no);if(g){var y=l;T(g[0].length),S(g[1],y,l);continue}var _=C();if(_){$(_),xo(r,t)&&T(1);continue}}var b=void 0,w=void 0,x=void 0;if(h>=0){for(w=t.slice(h);!(no.test(w)||to.test(w)||io.test(w)||oo.test(w)||(x=w.indexOf("<",1))<0);)h+=x,w=t.slice(h);b=t.substring(0,h),T(h)}h<0&&(b=t,t=""),e.chars&&b&&e.chars(b)}if(t===n){e.chars&&e.chars(t);break}}function T(e){l+=e,t=t.substring(e)}function C(){var e=t.match(to);if(e){var n,r,i={tagName:e[1],attrs:[],start:l};for(T(e[0].length);!(n=t.match(eo))&&(r=t.match(Gi));)T(r[0].length),i.attrs.push(r);if(n)return i.unarySlash=n[1],T(n[0].length),i.end=l,i}}function $(t){var n=t.tagName,l=t.unarySlash;o&&("p"===r&&Ji(n)&&S(r),s(n)&&r===n&&S(n));for(var c,u,f,d=a(n)||!!l,h=t.attrs.length,p=new Array(h),v=0;v=0&&i[a].lowerCasedTag!==s;a--);else a=0;if(a>=0){for(var c=i.length-1;c>=a;c--)e.end&&e.end(i[c].tag,n,o);i.length=a,r=a&&i[a-1].tag}else"br"===s?e.start&&e.start(t,[],!0,n,o):"p"===s&&(e.start&&e.start(t,[],!1,n,o),e.end&&e.end(t,n,o))}S()}(t,{warn:so,expectHTML:e.expectHTML,isUnaryTag:e.isUnaryTag,canBeLeftOpenTag:e.canBeLeftOpenTag,shouldDecodeNewlines:e.shouldDecodeNewlines,shouldDecodeNewlinesForHref:e.shouldDecodeNewlinesForHref,shouldKeepComment:e.comments,start:function(t,o,c){var u=r&&r.ns||vo(t);Y&&"svg"===u&&(o=function(t){for(var e=[],n=0;nl&&(s.push(o=t.slice(l,i)),a.push(JSON.stringify(o)));var c=hr(r[1].trim());a.push("_s("+c+")"),s.push({"@binding":c}),l=i+r[0].length}return l':'
',va.innerHTML.indexOf(" ")>0}var ya=!!W&&ga(!1),_a=!!W&&ga(!0),ba=b(function(t){var e=zn(t);return e&&e.innerHTML}),wa=dn.prototype.$mount;dn.prototype.$mount=function(t,e){if((t=t&&zn(t))===document.body||t===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=ba(r));else{if(!r.nodeType)return this;r=r.innerHTML}else t&&(r=function(t){if(t.outerHTML)return t.outerHTML;var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML}(t));if(r){var i=ma(r,{shouldDecodeNewlines:ya,shouldDecodeNewlinesForHref:_a,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return wa.call(this,t,e)},dn.compile=ma,e.a=dn}).call(this,n(0),n(12).setImmediate)},function(t,e){var n,r,i=t.exports={};function o(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function s(t){if(n===setTimeout)return setTimeout(t,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(t){n=o}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(t){r=a}}();var l,c=[],u=!1,f=-1;function d(){u&&l&&(u=!1,l.length?c=l.concat(c):f=-1,c.length&&h())}function h(){if(!u){var t=s(d);u=!0;for(var e=c.length;e;){for(l=c,c=[];++f1)for(var n=1;n1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),"string"==typeof e&&(e=document.querySelector(e)),!e||!e.nodeName)throw new Error("no element is specified to initialize BeautifyScrollBar");this.element=e,this.ownerDocument=this.element.ownerDocument||document,this.rect=this.element.getBoundingClientRect(),this.options=Object.assign({},{wheelSpeed:1,threshold:0,shownScrollbarX:!0,shownScrollbarY:!0,maxThumbXLength:void 0,maxThumbYLength:void 0},o,{threshold:isNaN(o.threshold)||o.threshold<=0?0:o.threshold,wheelSpeed:isNaN(o.wheelSpeed)||o.wheelSpeed<=0?1:o.wheelSpeed,maxThumbXLength:isNaN(o.maxThumbXLength)||o.maxThumbXLength<=0?void 0:o.maxThumbXLength,maxThumbYLength:isNaN(o.maxThumbYLength)||o.maxThumbYLength<=0?void 0:o.maxThumbYLength}),this.lastScrollLeft=0,this.lastScrollTop=0,this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.startingMousePageY=0,this.startingMousePageX=0,this.startingScrollTop=0,this.startingScrollLeft=0,this.yScrollFactor=0,this.xScrollFactor=0,this.dragDirect="",this.wheelEventHandler=(n=this._wheelEventHandler.bind(this),r=null,i=void 0,function(){var t=arguments,e=this;clearTimeout(r);var o=+new Date;i||(i=o),o-i>=10?(n.apply(e,arguments),i=o):r=setTimeout(function(){n.apply(e,t)},20)}),this.docMouseMoveHandler=this._docMouseMoveHandler.bind(this),this.docMouseUpHandler=this._docMouseUpHandler.bind(this),this.downXThumb=this._mouseDownHandler.bind(this,"x"),this.downYThumb=this._mouseDownHandler.bind(this,"y"),this.handleMouseEnter=this._handlerEnter.bind(this),this.handleMouseLeave=this._handlerLeave.bind(this),u(this.element,"beautify-scroll-container"),this._computed(),this._createBarEle(),this._bindEvent()}return t.prototype._computed=function(){this.contentWidth=isNaN(this.options.contentWidth)?Math.max(this.element.scrollWidth,this.rect.width):this.options.contentWidth,this.contentHeight=isNaN(this.options.contentHeight)?Math.max(this.element.scrollHeight,this.rect.height):this.options.contentHeight,this.containerWidth=this.rect.width,this.containerHeight=this.rect.height,this.maxScrollLeft=this.contentWidth-this.containerWidth,this.maxScrollTop=this.contentHeight-this.containerHeight},t.prototype._createBarEle=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.maxScrollTop>0&&this.options.shownScrollbarY){var e=0,n=0,r=0;this.yBar||(this.yBar=i("beautify-scroll__y-bar"),this.element.appendChild(this.yBar),this.yBar.setAttribute("tabindex",-1),this.yThumb=i("beautify-scroll__y-thumb"),this.yBar.appendChild(this.yThumb),this.yThumb.addEventListener("mousedown",this.downYThumb,!1)),t&&(e=this.yBar.style.top,n=this.yBar.style.right,r=this.yThumb.style.top),a(this.yBar,{height:this.containerHeight,right:n,top:e});var s=parseInt(this.containerHeight*this.containerHeight/this.contentHeight,10);this.yThumbHeight=isNaN(this.options.maxThumbYLength)||s<=this.options.maxThumbYLength?s:this.options.maxThumbYLength,a(this.yThumb,{top:r,height:this.yThumbHeight}),this.yScrollFactor=(this.contentHeight-this.containerHeight)/(this.containerHeight-this.yThumbHeight)}else this.yThumb=null,this.yBar&&o(this.yBar),this.yBar=null;if(this.maxScrollLeft>0&&this.options.shownScrollbarX){var l=0,c=0,u=0;this.xBar||(this.xBar=i("beautify-scroll__x-bar"),this.element.appendChild(this.xBar),this.xBar.setAttribute("tabindex",-1),this.xThumb=i("beautify-scroll__x-thumb"),this.xBar.appendChild(this.xThumb),this.xThumb.addEventListener("mousedown",this.downXThumb,!1)),t&&(l=this.xBar.style.left,c=this.xBar.style.bottom,u=this.xThumb.style.left),a(this.xBar,{left:l,width:this.containerWidth,bottom:c});var f=parseInt(this.containerWidth*this.containerWidth/this.contentWidth,10);this.xThumbWidth=isNaN(this.options.maxThumbXLength)||f<=this.options.maxThumbXLength?f:this.options.maxThumbXLength,a(this.xThumb,{left:u,width:this.xThumbWidth}),this.xScrollFactor=(this.contentWidth-this.containerWidth)/(this.containerWidth-this.xThumbWidth)}else this.xThumb=null,this.xBar&&o(this.xBar),this.xBar=null},t.prototype._handlerEnter=function(){this.yThumb&&u(this.yThumb,"shown"),this.xThumb&&u(this.xThumb,"shown")},t.prototype._handlerLeave=function(){this.yThumb&&c(this.yThumb,"shown"),this.xThumb&&c(this.xThumb,"shown")},t.prototype._bindEvent=function(){void 0!==window.onwheel?this.element.addEventListener("wheel",this.wheelEventHandler,!1):void 0!==window.onmousewheel&&this.element.addEventListener("mousewheel",this.wheelEventHandler,!1),this.element.addEventListener("mouseenter",this.handleMouseEnter,!1),this.element.addEventListener("mouseleave",this.handleMouseLeave,!1)},t.prototype._handleScrollDiff=function(){var t=this.element.scrollTop-this.lastScrollTop,e=this.element.scrollLeft-this.lastScrollLeft;0===this.element.scrollTop&&t&&this.element.dispatchEvent(f("bs-y-reach-start")),this.element.scrollTop===this.maxScrollTop&&t&&this.element.dispatchEvent(f("bs-y-reach-end")),0===this.element.scrollLeft&&e&&this.element.dispatchEvent(f("bs-x-reach-start")),this.element.scrollLeft===this.maxScrollLeft&&e&&this.element.dispatchEvent(f("bs-x-reach-end")),this.element.scrollHeight-this.element.scrollTop-this.rect.height<=this.options.threshold&&this.element.dispatchEvent(f("bs-reach-threshold"))},t.prototype._updateScrollBarStyle=function(){this.yBar&&a(this.yBar,{top:this.element.scrollTop,height:this.containerHeight,right:-this.element.scrollLeft});var t=parseInt(this.element.scrollTop*(this.containerHeight-this.yThumbHeight)/this.maxScrollTop,10);this.yThumb&&a(this.yThumb,{top:t,height:this.yThumbHeight}),this.xBar&&a(this.xBar,{left:this.element.scrollLeft,width:this.containerWidth,bottom:-this.element.scrollTop});var e=parseInt(this.element.scrollLeft*(this.containerWidth-this.xThumbWidth)/this.maxScrollLeft,10);this.xThumb&&a(this.xThumb,{left:e,width:this.xThumbWidth});var n=this.element.scrollTop-this.lastScrollTop,r=this.element.scrollLeft-this.lastScrollLeft;(n||r)&&this.element.dispatchEvent(f("bs-update-scroll-value"))},t.prototype._docMouseMoveHandler=function(t){if(t.stopPropagation(),t.preventDefault(),this.lastScrollLeft=this.element.scrollLeft,this.lastScrollTop=this.element.scrollTop,"x"===this.dragDirect){var e=this.startingScrollLeft+this.xScrollFactor*(t.pageX-this.startingMousePageX);this.element.scrollLeft=e>this.maxScrollLeft?this.maxScrollLeft:e}else if("y"===this.dragDirect){var n=this.startingScrollTop+this.yScrollFactor*(t.pageY-this.startingMousePageY);this.element.scrollTop=n>this.maxScrollTop?this.maxScrollTop:n}this._handleScrollDiff(),this._updateScrollBarStyle()},t.prototype._docMouseUpHandler=function(t){t.stopPropagation(),t.preventDefault(),"x"===this.dragDirect&&this.xThumb&&c(this.xThumb,"focus"),"y"===this.dragDirect&&this.yThumb&&c(this.yThumb,"focus"),this.ownerDocument.removeEventListener("mousemove",this.docMouseMoveHandler),this.ownerDocument.removeEventListener("mouseup",this.docMouseUpHandler)},t.prototype._mouseDownHandler=function(t,e){e.stopPropagation(),e.preventDefault(),"x"===t&&(this.startingMousePageX=e.pageX,this.startingScrollLeft=this.element.scrollLeft,this.xThumb&&u(this.xThumb,"focus")),"y"===t&&(this.startingMousePageY=e.pageY,this.startingScrollTop=this.element.scrollTop,this.yThumb&&u(this.yThumb,"focus")),this.dragDirect=t,this.ownerDocument.addEventListener("mousemove",this.docMouseMoveHandler,!1),this.ownerDocument.addEventListener("mouseup",this.docMouseUpHandler,!1)},t.prototype._wheelEventHandler=function(t){t.stopPropagation(),(this.maxScrollTop>0||this.maxScrollLeft>0)&&t.preventDefault(),this.yThumb&&!l(this.yThumb,"shown")&&u(this.yThumb,"shown"),this.xThumb&&!l(this.xThumb,"shown")&&u(this.xThumb,"shown");var e,n,r,i=(n=(e=t).deltaX,r=-1*e.deltaY,void 0!==n&&void 0!==r||(n=-1*e.wheelDeltaX/6,r=e.wheelDeltaY/6),e.deltaMode&&1===e.deltaMode&&(n*=10,r*=10),n!=n&&r!=r&&(n=0,r=e.wheelDelta),e.shiftKey?[-r,-n]:[n,r]),o=i[0],a=i[1];if(this.lastScrollLeft=this.element.scrollLeft,this.lastScrollTop=this.element.scrollTop,this._shouldUpdateScrollLeft(o)){var s=this.element.scrollLeft+o*this.options.wheelSpeed;this.element.scrollLeft=s>this.maxScrollLeft?this.maxScrollLeft:s}if(this._shouldUpdateScrollTop(a)){var c=this.element.scrollTop-a*this.options.wheelSpeed;this.element.scrollTop=c>this.maxScrollTop?this.maxScrollTop:c}this._handleScrollDiff(),this._updateScrollBarStyle()},t.prototype._shouldUpdateScrollLeft=function(t){return!(0===this.element.scrollLeft&&t<=0||this.element.scrollLeft===this.maxScrollLeft&&t>0)},t.prototype._shouldUpdateScrollTop=function(t){return!(0===this.element.scrollTop&&t>=0||this.element.scrollTop===this.maxScrollTop&&t<0)},t.prototype._unbindEvent=function(){this.element.removeEventListener("mouseenter",this.handleMouseEnter,!1),this.element.removeEventListener("mouseleave",this.handleMouseLeave,!1),this.element.removeEventListener("wheel",this.wheelEventHandler,!1),this.element.removeEventListener("mousewheel",this.wheelEventHandler,!1),this.xThumb&&this.xThumb.removeEventListener("mousedown",this.downXThumb,!1),this.yThumb&&this.yThumb.removeEventListener("mousedown",this.downYThumb,!1)},t.prototype.update=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.element&&(this.rect=this.element.getBoundingClientRect(),this.options=Object.assign({},this.options,t),this._computed(),this._createBarEle(!0))},t.prototype.destroy=function(){this.element&&(this._unbindEvent(),c(this.element,"beautify-scroll-container"),this.element=null,this.yBar&&o(this.yBar),this.xBar&&o(this.xBar),this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.wheelEventHandler=null,this.docMouseMoveHandler=null,this.docMouseUpHandler=null,this.downXThumb=null,this.downYThumb=null,this.handleMouseEnter=null,this.handleMouseLeave=null)},t}();e.default=d},,function(t,e){}])},function(t,e,n){"use strict";function r(t,e){for(var n=[],r={},i=0;in.parts.length&&(r.parts.length=n.parts.length)}else{var a=[];for(i=0;i=0){u=1;break}var d=l&&window.Promise?function(t){var e=!1;return function(){e||(e=!0,window.Promise.resolve().then(function(){e=!1,t()}))}}:function(t){var e=!1;return function(){e||(e=!0,setTimeout(function(){e=!1,t()},u))}},h={name:"v2-lazy-list",props:{data:{type:Array,default:function(){return[]},required:!0},height:{type:[Number,String],default:100},itemHeight:{type:[Number,String],default:40},tag:{type:String,default:"ul"},itemTag:{type:String,default:"li"},threshold:{type:[Number,String],default:0},mode:{type:String,default:"demand",validator:function(t){return["demand","lazy"].indexOf(t)>-1}}},data:function(){var t=Number.parseInt(this.itemHeight,10),e=String(this.height).indexOf("%")>-1,n=Number.parseInt(this.height,10);return{renderList:[],scrollTop:0,isPercent:e,viewportWith:0,viewportHeight:n=e?this.height:Number.isNaN(n)||n<100?100:n,ih:Number.isNaN(t)||t<20?20:t,contentWidth:NaN,contentHeight:NaN,contentMarginTop:0,scrollbar:null,wrapRect:null}},watch:{data:function(t,e){this.initRenderList(),t.length!==e.length&&this.updateScrollbar()},scrollTop:function(t){this.$emit("scrolling"),s()(this.updateRenderList),this.threshold>0&&this.contentHeight-this.viewportHeight-t<=this.threshold&&this.reachThreshold()}},provide:function(){return{list:this}},render:function(t){this.$h||(this.$h=t);var e=t(this.tag,{class:{"v2-lazy-list":!0},style:{marginTop:this.contentMarginTop+"px"}},this.renderList);return t("div",{class:{"v2-lazy-list-wrap":!0},style:{height:this.isPercent?this.viewportHeight:this.viewportHeight+"px"}},[e])},methods:{initRenderList:function(){this.contentHeight=Math.ceil(this.data.length*this.ih),"demand"===this.mode?this.renderList=this.getDemandList():"lazy"===this.mode&&(this.renderList=this.getLazyList())},updateRenderList:function(){"demand"===this.mode?this.renderList=this.getDemandList():"lazy"===this.mode&&(this.renderList=this.getLazyList())},updateScrollbar:function(){var t=this;this.scrollbar&&this.$nextTick(function(){t.scrollbar.update({contentHeight:t.contentHeight})})},getDemandList:function(){for(var t=[],e=this.isPercent?this.wrapRect.height:this.viewportHeight,n=Math.floor(this.scrollTop/this.ih),r=Math.ceil((this.scrollTop+e)/this.ih),i=n;i")])]),t._v(" "),n("br")])},function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"demo-code"},[e("pre",[this._v(' \n \n \n ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"demo-code"},[e("pre",[this._v(' \n \n \n ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"demo-code"},[e("pre",[this._v(' \n \n ')])])}],u._compiled=!0),i&&(c=i),c)if(u.functional){u._injectStyles=c;var f=u.render;u.render=function(t,e){return c.call(e),f(t,e)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,c):[c]}return{exports:t,options:u}}({data:function(){return{total:100,total2:100,list:[],list2:[],list3:[],itemHeight:40,height:500,page:1,pageSize:15,loading:!1,text:"loading"}},watch:{total:function(t){this.getListData()},total2:function(){this.getList3Data()}},methods:{getListData:function(){for(var t=[],e=1;e<=+this.total;e++)t.push(e);this.list=[].concat(t)},getList3Data:function(){for(var t=[],e=1;e<=+this.total2;e++)t.push(e);this.list3=[].concat(t)},getList2Data:function(){for(var t=[],e=0;e<=this.page*this.pageSize;e++)t.push(e);this.list2=[].concat(t),this.page++},appendList2Data:function(){var t=this;this.loading||(this.loading=!0,setTimeout(function(){if(5===t.page)return t.text="",void t.list2.push("No more data");for(var e=[].concat(t.list2),n=(t.page-1)*t.pageSize,r=t.page*t.pageSize;n=0&&(t._idleTimeoutId=setTimeout(function(){t._onTimeout&&t._onTimeout()},e))},n(11),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(0))},,function(t,e){},,function(t,e){}]); --------------------------------------------------------------------------------