.`, where the hash is the SHA of the commit being reverted.
62 |
63 | ### Type
64 |
65 | If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
66 |
67 | Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
68 |
69 | ### Scope
70 |
71 | The scope is optional, there are the supported scopes: `core`, `spinner`, `config` and `deps`.
72 |
73 | ### Subject
74 |
75 | The subject contains succinct description of the change:
76 |
77 | * use the imperative, present tense: "change" not "changed" nor "changes"
78 | * don't capitalize first letter
79 | * no dot (.) at the end
80 |
81 | ### Body
82 |
83 | Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
84 | The body should include the motivation for the change and contrast this with previous behavior.
85 |
86 | ### Footer
87 |
88 | The footer should contain any information about **Breaking Changes** and is also the place to
89 | reference GitHub issues that this commit **Closes**.
90 |
91 | **Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
92 |
--------------------------------------------------------------------------------
/docs/zh/guide/configure-load-msg.md:
--------------------------------------------------------------------------------
1 | ---
2 | previewLink: //jsfiddle.net/PeachScript/94kL0bvs/embedded/result/
3 | ---
4 |
5 | # 配置加载提示
6 |
7 | 此组件提供了四种不同的插槽用来显示不同的加载提示：`spinner`、`no-more`、`no-results`、`error`，所有插槽的默认值都在右边的预览中列出来了，你还可以通过[这里](../api/#插槽)了解更多。
8 |
9 | ## 通过组件 Prop
10 |
11 | 只有 `spinner` 插槽可以通过 prop 进行配置，并且此时的设定值只能是内置的动画类型：
12 |
13 | ``` html
14 |
29 | Loading...
30 | No more message
31 | No results message
32 |
33 | ```
34 |
35 | 与其他插槽不同的是，`error` 插槽的默认值除了会提供文字信息之外，还会提供一个重试按钮供用户重新尝试加载；在自定义 `error` 插槽时，如果你也希望提供一个重试按钮给用户，可以接收 prop 中的重試的方法 `trigger` 並注入到按鈕，就像下面这样：
36 |
37 | ``` html
38 |
39 |
40 | Error message, click
here to retry
41 |
43 | ```
44 |
45 | ## 通过插件 API
46 |
47 | 在我们构建大型应用时，为了保证所有加载提示的行为一致，此插件支持通过插件 API 统一配置所有的插槽内容，我们只需要传递一个字符串或者 Vue 组件给它就可以了，点击[这里](./configure-plugin-opts.md#插槽)了解更多。
48 |
49 | 在这里 `error` 插槽仍然是最特殊的哪一个，和使用 `v-slot` 指令一样，如果你希望提供一个重试按钮给用户，你可以使用 [`vm.$attrs`](https://cn.vuejs.org/v2/api/#vm-attrs) 属性，就像这样：
50 |
51 | ``` html
52 |
53 |
54 | Error message, click
55 |
here
56 | to retry
57 |
79 |
80 | No more message
81 |
82 |
83 | ```
84 |
85 | 如果你希望隐藏某个插槽，你可以创建一个不是 `template` 标签的空元素，因为 Vue.js 会忽略空的 `template` 元素：
86 |
87 | ``` html
88 |
89 |
90 |
92 | ```
93 |
94 | 如果你希望移除默认样式以避免影响自己的样式，你可以将插槽内容用不是 `template` 标签的元素包裹：
95 |
96 | ``` html
97 |
98 |
99 | No more message
100 |
101 | ```
102 |
103 | 差点忘了，如果你想通过插件 API 全局配置插槽内容，可以像这样进行控制：
104 |
105 | ``` js
106 | import Vue from 'vue';
107 | import InfiniteLoading from 'vue-infinite-loading';
108 | import InfiniteError from 'path/to/your/components/InfiniteError',
109 |
110 | Vue.use(InfiniteLoading, {
111 | slots: {
112 | // keep default styles
113 | noResults: 'No results message',
114 |
115 | // remove default styles
116 | noMore: InfiniteError,
117 |
118 | // hide slot
119 | error: {
120 | render: h => h('div'),
121 | },
122 | },
123 | });
124 | ```
125 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import config, { ERRORS } from './config';
4 |
5 | /**
6 | * console warning in production
7 | * @param {String} msg console content
8 | */
9 | export function warn(msg) {
10 | /* istanbul ignore else */
11 | if (config.mode !== 'production') {
12 | console.warn(`[Vue-infinite-loading warn]: ${msg}`);
13 | }
14 | }
15 |
16 | /**
17 | * console error
18 | * @param {String} msg console content
19 | */
20 | export function error(msg) {
21 | console.error(`[Vue-infinite-loading error]: ${msg}`);
22 | }
23 |
24 | export const throttleer = {
25 | timers: [],
26 | caches: [],
27 | throttle(fn) {
28 | if (this.caches.indexOf(fn) === -1) {
29 | // cache current handler
30 | this.caches.push(fn);
31 |
32 | // save timer for current handler
33 | this.timers.push(setTimeout(() => {
34 | fn();
35 |
36 | // empty cache and timer
37 | this.caches.splice(this.caches.indexOf(fn), 1);
38 | this.timers.shift();
39 | }, config.system.throttleLimit));
40 | }
41 | },
42 | reset() {
43 | // reset all timers
44 | this.timers.forEach((timer) => {
45 | clearTimeout(timer);
46 | });
47 | this.timers.length = 0;
48 |
49 | // empty caches
50 | this.caches = [];
51 | },
52 | };
53 |
54 | export const loopTracker = {
55 | isChecked: false,
56 | timer: null,
57 | times: 0,
58 | track() {
59 | // record track times
60 | this.times += 1;
61 |
62 | // try to mark check status
63 | clearTimeout(this.timer);
64 | this.timer = setTimeout(() => {
65 | this.isChecked = true;
66 | }, config.system.loopCheckTimeout);
67 |
68 | // throw warning if the times of continuous calls large than the maximum times
69 | if (this.times > config.system.loopCheckMaxCalls) {
70 | error(ERRORS.INFINITE_LOOP);
71 | this.isChecked = true;
72 | }
73 | },
74 | };
75 |
76 | export const scrollBarStorage = {
77 | key: '_infiniteScrollHeight',
78 | getScrollElm(elm) {
79 | return elm === window ? document.documentElement : elm;
80 | },
81 | save(elm) {
82 | const target = this.getScrollElm(elm);
83 |
84 | // save scroll height on the scroll parent
85 | target[this.key] = target.scrollHeight;
86 | },
87 | restore(elm) {
88 | const target = this.getScrollElm(elm);
89 |
90 | /* istanbul ignore else */
91 | if (typeof target[this.key] === 'number') {
92 | target.scrollTop = target.scrollHeight - target[this.key] + target.scrollTop;
93 | }
94 |
95 | this.remove(target);
96 | },
97 | remove(elm) {
98 | if (elm[this.key] !== undefined) {
99 | // remove scroll height
100 | delete elm[this.key]; // eslint-disable-line no-param-reassign
101 | }
102 | },
103 | };
104 |
105 | /**
106 | * kebab-case a camel-case string
107 | * @param {String} str source string
108 | * @return {String}
109 | */
110 | export function kebabCase(str) {
111 | return str.replace(/[A-Z]/g, s => `-${s.toLowerCase()}`);
112 | }
113 |
114 | /**
115 | * get visibility for element
116 | * @param {DOM} elm
117 | * @return {Boolean}
118 | */
119 | export function isVisible(elm) {
120 | return (elm.offsetWidth + elm.offsetHeight) > 0;
121 | }
122 |
123 | export default {
124 | warn,
125 | error,
126 | throttleer,
127 | loopTracker,
128 | kebabCase,
129 | scrollBarStorage,
130 | isVisible,
131 | };
132 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at [scdzwyxst@gmail.com](mailto:scdzwyxst@gmail.com). All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | title: 'Vue-infinite-loading',
3 | head: [
4 | ['link', { rel: 'shortcut icon', href: '/favicon.ico' }],
5 | ],
6 | base: '/vue-infinite-loading/',
7 | ga: 'UA-128069695-1',
8 | locales: {
9 | '/': {
10 | description: 'An infinite scroll plugin for Vue.js',
11 | },
12 | '/zh/': {
13 | description: '一款用于 Vue.js 的无限滚动插件',
14 | },
15 | },
16 | themeConfig: {
17 | sidebar: 'auto',
18 | repo: '/PeachScript/vue-infinite-loading',
19 | editLinks: true,
20 | docsDir: 'docs',
21 | locales: {
22 | '/': {
23 | lang: 'en-US',
24 | selectText: 'Languages',
25 | label: 'English',
26 | lastUpdated: true,
27 | nav: [
28 | {
29 | text: 'Guide',
30 | link: '/guide/',
31 | },
32 | {
33 | text: 'API',
34 | link: '/api/',
35 | },
36 | {
37 | text: 'Old Version',
38 | link: 'https://peachscript.github.io/vue-infinite-loading/old/',
39 | },
40 | {
41 | text: 'Changelog',
42 | link: 'https://github.com/PeachScript/vue-infinite-loading/releases',
43 | },
44 | ],
45 | sidebar: {
46 | '/guide/': [
47 | '',
48 | 'start-with-hn',
49 | 'use-with-filter-or-tabs',
50 | 'top-dir-scroll',
51 | 'use-with-el-table',
52 | 'configure-load-msg',
53 | 'configure-plugin-opts',
54 | ],
55 | },
56 | footer: `
57 |
58 | Released under the
59 | MIT License
60 | |
61 | Powered by
62 | VuePress
63 |
64 |
65 | ©2016-present Made with ♥ by
66 | PeachScript
67 |
68 | `,
69 | },
70 | '/zh/': {
71 | lang: 'zh-CN',
72 | selectText: '选择语言',
73 | label: '简体中文',
74 | lastUpdated: '上次更新',
75 | editLinkText: '在 GitHub 上编辑此页',
76 | nav: [
77 | {
78 | text: '指南',
79 | link: '/zh/guide/',
80 | },
81 | {
82 | text: 'API',
83 | link: '/zh/api/',
84 | },
85 | {
86 | text: '旧版文档',
87 | link: 'https://peachscript.github.io/vue-infinite-loading/old/',
88 | },
89 | {
90 | text: '更新日志',
91 | link: 'https://github.com/PeachScript/vue-infinite-loading/releases',
92 | },
93 | ],
94 | sidebar: {
95 | '/zh/guide/': [
96 | '',
97 | 'start-with-hn',
98 | 'use-with-filter-or-tabs',
99 | 'top-dir-scroll',
100 | 'use-with-el-table',
101 | 'configure-load-msg',
102 | 'configure-plugin-opts',
103 | ],
104 | },
105 | footer: `
106 |
107 | 遵循
108 | MIT 开源协议
109 | |
110 | 由
111 | VuePress
112 | 强力驱动
113 |
114 |
115 | ©2016-present Made with ♥ by
116 | PeachScript
117 |
118 | `,
119 | },
120 | },
121 | },
122 | plugins: [
123 | require('@vuepress/theme-default/index'),
124 | '@vuepress/google-analytics'
125 | ],
126 | };
127 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-infinite-loading",
3 | "version": "2.4.5",
4 | "description": "An infinite scroll plugin for Vue.js",
5 | "main": "dist/vue-infinite-loading.js",
6 | "typings": "types/index.d.ts",
7 | "files": [
8 | "dist/vue-infinite-loading.js",
9 | "types/*.d.ts",
10 | "src"
11 | ],
12 | "author": {
13 | "name": "PeachScript",
14 | "email": "scdzwyxst@gmail.com"
15 | },
16 | "scripts": {
17 | "dev": "webpack-dev-server --config scripts/webpack.config.js --hot --info=false --port 8000",
18 | "build": "NODE_ENV=production webpack --config scripts/webpack.config.js -p --progress --hide-modules",
19 | "docs:dev": "vuepress dev docs",
20 | "docs:build": "vuepress build docs",
21 | "docs:deploy": "bash ./scripts/deploy_docs.sh",
22 | "lint": "eslint -f friendly --ext .js,.vue ./",
23 | "test": "BABEL_ENV=test karma start scripts/karma.conf.js",
24 | "precommit": "npm run lint",
25 | "commitmsg": "commitlint -E GIT_PARAMS",
26 | "release": "bash ./scripts/release.sh"
27 | },
28 | "keywords": [
29 | "vue",
30 | "vue components",
31 | "infinite loading",
32 | "infinite scroll",
33 | "vue infinite"
34 | ],
35 | "repository": {
36 | "type": "git",
37 | "url": "git+https://github.com/PeachScript/vue-infinite-loading.git"
38 | },
39 | "bugs": {
40 | "url": "https://github.com/PeachScript/vue-infinite-loading/issues"
41 | },
42 | "homepage": "https://github.com/PeachScript/vue-infinite-loading",
43 | "devDependencies": {
44 | "@babel/core": "^7.0.0",
45 | "@babel/plugin-transform-runtime": "^7.0.0",
46 | "@babel/preset-env": "^7.0.0",
47 | "@babel/runtime": "^7.0.0",
48 | "@commitlint/cli": "^7.0.0",
49 | "@commitlint/config-conventional": "^7.0.1",
50 | "@vuepress/plugin-google-analytics": "^1.0.0-alpha.16",
51 | "autoprefixer": "^9.1.5",
52 | "babel-loader": "^8.0.2",
53 | "babel-plugin-istanbul": "^5.0.1",
54 | "chai": "^3.5.0",
55 | "css-loader": "^0.28.4",
56 | "eslint": "^4.19.1",
57 | "eslint-config-airbnb-base": "^13.1.0",
58 | "eslint-formatter-friendly": "^6.0.0",
59 | "eslint-loader": "^2.1.0",
60 | "eslint-plugin-import": "^2.14.0",
61 | "eslint-plugin-vue": "^4.7.1",
62 | "focus-visible": "^4.1.5",
63 | "html-webpack-plugin": "^3.2.0",
64 | "husky": "^0.14.3",
65 | "karma": "^3.0.0",
66 | "karma-chai": "^0.1.0",
67 | "karma-coverage": "^1.1.1",
68 | "karma-mocha": "^1.3.0",
69 | "karma-phantomjs-launcher": "^1.0.4",
70 | "karma-sinon-chai": "^1.3.1",
71 | "karma-spec-reporter": "0.0.31",
72 | "karma-webpack": "^4.0.0-rc.2",
73 | "less": "^3.8.1",
74 | "less-loader": "^4.1.0",
75 | "mocha": "^5.2.0",
76 | "phantomjs-prebuilt": "^2.1.15",
77 | "postcss-loader": "^3.0.0",
78 | "sinon": "^2.4.1",
79 | "sinon-chai": "^2.13.0",
80 | "vue": "^2.6.10",
81 | "vue-loader": "^15.7.0",
82 | "vue-template-compiler": "^2.6.10",
83 | "vuepress": "^1.0.0-alpha.23",
84 | "webpack": "^4.17.2",
85 | "webpack-cli": "^3.1.0",
86 | "webpack-dev-server": "^3.1.8"
87 | },
88 | "peerDependencies": {
89 | "vue": "^2.6.10"
90 | },
91 | "license": "MIT",
92 | "browserslist": [
93 | "> 1%",
94 | "last 1 versions",
95 | "last 4 Android versions",
96 | "last 3 iOS versions"
97 | ],
98 | "commitlint": {
99 | "extends": [
100 | "@commitlint/config-conventional"
101 | ],
102 | "rules": {
103 | "scope-enum": [
104 | 2,
105 | "always",
106 | [
107 | "core",
108 | "config",
109 | "spinner",
110 | "deps"
111 | ]
112 | ]
113 | }
114 | },
115 | "eslintConfig": {
116 | "root": true,
117 | "extends": [
118 | "airbnb-base",
119 | "plugin:vue/essential"
120 | ]
121 | },
122 | "eslintIgnore": [
123 | "dist",
124 | "test/unit/coverage",
125 | "scripts"
126 | ]
127 | }
128 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * default property values
3 | */
4 |
5 | const props = {
6 | // the default spinner type
7 | spinner: 'default',
8 |
9 | // the default critical distance
10 | distance: 100,
11 |
12 | // the default force use infinite wrapper flag
13 | forceUseInfiniteWrapper: false,
14 | };
15 |
16 | /**
17 | * default system settings
18 | */
19 |
20 | const system = {
21 | // the default throttle space of time
22 | throttleLimit: 50,
23 |
24 | // the timeout for check infinite loop, unit: ms
25 | loopCheckTimeout: 1000,
26 |
27 | // the max allowed number of continuous calls, unit: ms
28 | loopCheckMaxCalls: 10,
29 | };
30 |
31 | /**
32 | * default slot messages
33 | */
34 | const slots = {
35 | noResults: 'No results :(',
36 | noMore: 'No more data :)',
37 | error: 'Opps, something went wrong :(',
38 | errorBtnText: 'Retry',
39 | spinner: '',
40 | };
41 |
42 | /**
43 | * the 3rd argument for event bundler
44 | * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
45 | */
46 |
47 | export const evt3rdArg = (() => {
48 | let result = false;
49 |
50 | try {
51 | const arg = Object.defineProperty({}, 'passive', {
52 | get() {
53 | result = { passive: true };
54 | return true;
55 | },
56 | });
57 |
58 | window.addEventListener('testpassive', arg, arg);
59 | window.remove('testpassive', arg, arg);
60 | } catch (e) { /* */ }
61 |
62 | return result;
63 | })();
64 |
65 | /**
66 | * warning messages
67 | */
68 |
69 | export const WARNINGS = {
70 | STATE_CHANGER: [
71 | 'emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):',
72 | '\ntemplate:',
73 | '
105 | ...
106 |
107 |
109 | or
110 |
111 | ...
112 |
113 |
115 | `,
116 | 'more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169',
117 | ].join('\n'),
118 | };
119 |
120 | /**
121 | * plugin status constants
122 | */
123 | export const STATUS = {
124 | READY: 0,
125 | LOADING: 1,
126 | COMPLETE: 2,
127 | ERROR: 3,
128 | };
129 |
130 | /**
131 | * default slot styles
132 | */
133 | export const SLOT_STYLES = {
134 | color: '#666',
135 | fontSize: '14px',
136 | padding: '10px 0',
137 | };
138 |
139 | export default {
140 | mode: 'development',
141 | props,
142 | system,
143 | slots,
144 | WARNINGS,
145 | ERRORS,
146 | STATUS,
147 | };
148 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/components/Intro.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | |
7 |
8 |
9 |
15 |
16 |
19 |
20 |
22 |
23 |
24 |
27 |
28 |
30 |
31 |
74 |
75 |
76 |
171 |
--------------------------------------------------------------------------------
/docs/guide/configure-load-msg.md:
--------------------------------------------------------------------------------
1 | ---
2 | previewLink: //jsfiddle.net/PeachScript/94kL0bvs/embedded/result/
3 | ---
4 |
5 | # Configure Load Messages
6 |
7 | This component provides four different slots that you can use to display different load messages: `spinner`, `no-more`, `no-results`, `error`. All of the default values are listed in the preview container on the right, and you can read more about them [here](../api/#slots).
8 |
9 | ## Via Component Prop
10 |
11 | Only the `spinner` slot can be configured via the prop, and the set value can only be the built-in spinner type:
12 |
13 | ``` html
14 |
29 | Loading...
30 | No more message
31 | No results message
32 |
33 | ```
34 |
35 | Unlike other slots, the default value for the `error` slot will provide a retry button for users to load the data again. If you want to implement a retry button for users when you customize the `error` slot, you can receive the retry method `trigger` in prop and inject it into the retry button. like this:
36 |
37 | ``` html
38 |
39 |
40 | Error message, click
here to retry
41 |
43 | ```
44 |
45 | ## Via Plugin API
46 |
47 | In order to maintain consistent behavior for all load messages when we are building a large application, this plugin supports configuration on all slots using the plugin API. We just need to pass a string or Vue component to it, click [here](./configure-plugin-opts.md#slots) to read more about that.
48 |
49 | The `error` slot is still special in this way. Just as with the `v-slot` directive, if you want to implement a retry button for users in your own error component, you can use the [`vm.$attrs`](https://cn.vuejs.org/v2/api/#vm-attrs) property, like this:
50 |
51 | ``` html
52 |
53 |
54 | Error message, click
55 |
here
56 | to retry
57 |
79 |
80 | No more message
81 |
82 |
83 | ```
84 |
85 | If you want to hide a slot, you can create an empty element that is not a `template` element, because the empty `template` element will be ignored by Vue.js:
86 |
87 | ``` html
88 |
89 |
90 |
92 | ```
93 |
94 | If you want to remove all default styles to avoid affecting your own styles, you can wrap the content with an element that is not a `template` element:
95 |
96 | ``` html
97 |
98 |
99 | No more message
100 |
101 | ```
102 |
103 | I almost forgot, if you want to configure the slot content globally via the plugin API, you can control it like this:
104 |
105 | ``` js
106 | import Vue from 'vue';
107 | import InfiniteLoading from 'vue-infinite-loading';
108 | import InfiniteError from 'path/to/your/components/InfiniteError',
109 |
110 | Vue.use(InfiniteLoading, {
111 | slots: {
112 | // keep default styles
113 | noResults: 'No results message',
114 |
115 | // remove default styles
116 | noMore: InfiniteError,
117 |
118 | // hide slot
119 | error: {
120 | render: h => h('div'),
121 | },
122 | },
123 | });
124 | ```
125 |
--------------------------------------------------------------------------------
/docs/zh/api/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # API
6 |
7 | ## 属性
8 |
9 | 大多数属性都可以通过插件 API 改写全局默认值。
10 |
11 | - 参考：[配置插件选项 - 属性/设置](../guide/configure-plugin-opts.md#属性-设置)
12 |
13 | ### distance
14 |
15 | - 类型：`Number`
16 | - 默认值：`100`
17 | - 详细：
18 |
19 | 当滚动条的距离小于此值时，`infinite` 事件将会被触发。如果 `direction` 的值是 `top`，则计算滚动条距离顶部的距离；如果 `direction` 的值是 `bottom`，则计算滚动条距离底部的距离。
20 |
21 | ### spinner
22 |
23 | - 类型：`String`
24 | - 默认值：`default`
25 | - 有效值：`default` | `spiral` | `circles` | `bubbles` | `waveDots`
26 | - 详细：
27 |
28 | 此选项用于设置加载动画，你可以从内置选项中选择一个你喜欢的，你也可以通过名为 `spinner` 的[具名插槽](#spinner-2)来进行自定义。
29 |
30 | - 参考：[配置加载提示](../guide/configure-load-msg.md)
31 |
32 | ### direction
33 |
34 | - 类型：`String`
35 | - 默认值：`bottom`
36 | - 有效值：`top` | `bottom`
37 | - 详细：
38 |
39 | 此选项用于设置滚动加载的方向。
40 |
41 | ### forceUseInfiniteWrapper
42 |
43 | - 类型：`Boolean` | `String`
44 | - 默认值：`false`
45 | - 详细：
46 |
47 | 默认情况下，该组件会寻找最近的具备 `overflow-y: auto | scroll` CSS 样式的父元素，作为监听滚动事件的目标元素，此选项用于强制指定滚动元素，通常用于有复杂布局或第三方滚动组件（例如 [`perfect-scrollbar`](https://github.com/noraesae/perfect-scrollbar)）的场景。
48 |
49 | 如果该值为 `true`，则会向上查找最近的具备 `infinite-wrapper` 属性的父元素作为滚动容器；如果该值为一个字符串，则会将该值当作 CSS 选择器并使用 `querySelector` 查找该元素，将其作为滚动容器；如果以上两种情况都找不到目标元素，则会使用 `window` 作为滚动容器。
50 |
51 | ### identifier
52 |
53 | - 类型：`any`
54 | - 默认值：`+new Date()`
55 | - 详细：
56 |
57 | 该组件会在此值改变时对组件进行重设，就像重新创建了一个新的组件一样，通常用于过滤器或者选项卡的场景。
58 |
59 | ## 插槽
60 |
61 | ::: warning
62 | Vue.js 官方于 v2.6.0 后[废弃 slot 特殊特性](https://cn.vuejs.org/v2/api/#slot-废弃)，推荐使用[v-slot 指令](https://cn.vuejs.org/v2/api/#v-slot)。
63 | :::
64 |
65 | 插槽的内容可以通过 `Vue.js` 官方提供的[`v-slot` 指令](https://cn.vuejs.org/v2/api/#v-slot)进行设置，也可以通过插件 API 进行全局设置。
66 |
67 | - 参考：
68 | - [配置加载提示](../guide/configure-load-msg.md)
69 | - [配置插件选项 - 插槽](../guide/configure-plugin-opts.md#插槽)
70 |
71 | ### no-results
72 |
73 | - 默认值：`No results :(`
74 | - 详细：
75 |
76 | 该信息将会在没有加载到任何数据时呈现给用户，即没有调用过 `$state.loaded` 方法就调用了 `$state.complete` 方法。
77 |
78 | ### no-more
79 |
80 | - 默认值：`No more data :)`
81 | - 详细：
82 |
83 | 该信息将会在所有数据都已经加载完时呈现给用户，即调用过 `$state.loaded` 方法之后调用了 `$state.complete` 方法。
84 |
85 | ### error
86 |
87 | - 默认值：`Opps, something went wrong :( Retry `
88 | - 详细：
89 |
90 | 该信息将会在加载出现错误时呈现给用户，即调用 `$state.error` 方法时。
91 |
92 | ### spinner
93 |
94 | - 默认值：`Internal Spinner`
95 | - 详细：
96 |
97 | 此插槽将会在加载数据时展示，你可以通过它自定义加载动画。
98 |
99 | ## 事件
100 |
101 | ### infinite
102 |
103 | - 参数：`event`
104 | - 详细：
105 |
106 | 该事件将会在滚动距离小于 `distance` 属性时被触发，组件会传递一个特殊的事件参数给事件监听器，用于改变组件的加载状态，通常我们将其命名为 `$state`，它包含以下几个方法：
107 |
108 | #### $state.loaded
109 |
110 | 通知组件此次加载已经顺利完成，如果此时数据仍然没有填满首屏，`infinite` 事件将会被再次触发；反之，组件将会关闭加载动画并继续监听滚动事件。
111 |
112 | #### $state.complete
113 |
114 | 通知组件所有的数据已经加载完成，如果调用此方法前没有调用过 `$state.loaded`，那么插槽 `no-results` 的内容将会被展示；如果调用此方法前调用过 `$state.loaded`，那么插槽 `no-more` 的内容将会被展示。
115 |
116 | #### $state.error
117 |
118 | 通知组件此次加载失败了，插槽 `error` 的内容将会被展示。
119 |
120 | #### $state.reset
121 |
122 | 重设组件状态，等同于改变 `identifier` 属性。
123 |
124 | ## 选项
125 |
126 | 你可以通过插件 API 配置所有的插件选项。
127 |
128 | - 参考：[配置插件选项](../guide/configure-plugin-opts.md)
129 |
130 | ### props.spinner
131 |
132 | - 类型：`String`
133 | - 详细：
134 |
135 | 配置 `spinner` 属性的默认值。
136 |
137 | ::: warning 注意
138 | 该配置被读取的优先级低于 [选项 - slots.spinner](#slots-spinner)，这意味着如果你正确配置了 `slots.spinner`，该配置就永远不会生效
139 | :::
140 |
141 | - 参考：[属性 - spinner](#spinner)
142 |
143 | ### props.distance
144 |
145 | - 类型：`Number`
146 | - 详细：
147 |
148 | 配置 `distance` 属性的默认值。
149 |
150 | - 参考：[属性 - distance](#distance)
151 |
152 | ### props.forceUseInfiniteWrapper
153 |
154 | - 类型：`Boolean` | `String`
155 | - 详细：
156 |
157 | 配置 `forceUseInfiniteWrapper` 属性的默认值。
158 |
159 | - 参考：[属性 - forceUseInfiniteWrapper](#forceuseinfinitewrapper)
160 |
161 | ### slots.noResults
162 |
163 | - 类型：`String` | `Vue Component`
164 | - 详细：
165 |
166 | 配置 `no-results` 插槽的默认内容。
167 |
168 | - 参考：[插槽 - no-results](#no-results)
169 |
170 | ### slots.noMore
171 |
172 | - 类型：`String` | `Vue Component`
173 | - 详细：
174 |
175 | 配置 `no-more` 插槽的默认内容。
176 |
177 | - 参考：[插槽 - no-more](#no-more)
178 |
179 | ### slots.error
180 |
181 | - 类型：`String` | `Vue Component`
182 | - 详细：
183 |
184 | 配置 `error` 插槽的默认内容。
185 |
186 | - 参考：[插槽 - error](#error)
187 |
188 | ### slots.errorBtnText
189 |
190 | - 类型：`String`
191 | - 默认值：`Retry`
192 | - 详细：
193 |
194 | 配置默认 `error` 插槽中重试按钮的显示文案。请注意，如果你自定义了 `error` 插槽的内容，此配置将没有任何作用，你需要自行创建重试按钮。
195 |
196 | - 参考：
197 | - [插槽 - error](#error)
198 | - [配置加载提示](../guide/configure-load-msg.md)
199 |
200 | ### slots.spinner
201 |
202 | - 类型：`String` | `Vue Component`
203 | - 详细：
204 |
205 | 配置 `spinner` 插槽的默认内容。
206 |
207 | - 参考：[插槽 - spinner](#spinner-2)
208 |
209 | ### system.throttleLimit
210 |
211 | - 类型：`Number`
212 | - 默认值：`50`
213 | - 详细：
214 |
215 | 配置 `scroll` 事件节流的间隔时间（单位：毫秒）。
216 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guide
2 |
3 | > This is adapted from [Vue.js's contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md).
4 |
5 | Hi! I’m really excited that you are interested in contributing to Vue-infinite-loading. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
6 |
7 | - [Code of Conduct](https://github.com/PeachScript/vue-infinite-loading/blob/master/.github/CODE_OF_CONDUCT.md)
8 | - [Issue Reporting Guidelines](#issue-reporting-guidelines)
9 | - [Pull Request Guidelines](#pull-request-guidelines)
10 | - [Development Setup](#development-setup)
11 | - [Project Structure](#project-structure)
12 |
13 | ## Issue Reporting Guidelines
14 |
15 | - The issue list of this repo is **exclusively** for bug reports and feature requests.
16 |
17 | - Try to search for your issue, it may have already been answered or even fixed in the development version.
18 |
19 | - Check if the issue is reproducible with the latest stable version of Vue-infinite-loading. If you are using a pre-release, please indicate the specific version you are using.
20 |
21 | - It is **required** that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.
22 |
23 | - Use only the minimum amount of code necessary to reproduce the unexpected behavior. A good bug report should isolate specific methods that exhibit unexpected behavior and precisely define how expectations were violated. What did you expect the method or methods to do, and how did the observed behavior differ? The more precisely you isolate the issue, the faster we can investigate.
24 |
25 | - Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.
26 |
27 | - It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with [this template](https://jsfiddle.net/PeachScript/qax0dbnc/) that already includes the latest version of Vue-infinite-loading.
28 |
29 | - If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
30 |
31 | ## Pull Request Guidelines
32 |
33 | - Checkout a topic branch from the `master` branch, and merge back against it.
34 |
35 | - Work in the `src` folder and **DO NOT** checkin `dist` in the commits.
36 |
37 | - It's OK to have multiple small commits as you work on the PR - we will let GitHub automatically squash it before merging.
38 |
39 | - Make sure `npm test` passes. (see [development setup](#development-setup))
40 |
41 | - If adding new feature:
42 | - Add accompanying test case.
43 | - Provide convincing reason to add this feature. Ideally you should open a suggestion issue first and have it greenlighted before working on it.
44 |
45 | - If fixing a bug:
46 | - If you are resolving a special issue, add `(fix #xxxx[,#xxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
47 | - Provide detailed description of the bug in the PR. Live demo preferred.
48 | - Add appropriate test coverage if applicable.
49 |
50 | ## Development Setup
51 |
52 | You will need [Node.js](http://nodejs.org) **version 6+** installed.
53 |
54 | After cloning the repo, run:
55 |
56 | ``` bash
57 | $ npm install # or yarn
58 | ```
59 |
60 | ### Committing Changes
61 |
62 | Commit messages should follow the [commit message convention](./COMMIT_CONVENTION.md) so that changelogs can be automatically generated. Commit messages will be automatically validated upon commit.
63 |
64 | ### Commonly used NPM scripts
65 |
66 | ``` bash
67 | # run dev-server
68 | $ npm run dev
69 |
70 | # lint code
71 | $ npm run lint
72 |
73 | # run the test suite
74 | $ npm test
75 | ```
76 |
77 | There are some other scripts available in the `scripts` section of the `package.json` file.
78 |
79 | **Please make sure to have test pass successfully before submitting a PR.** Although the same tests will be run against your PR on the CI server, it is better to have it working locally beforehand.
80 |
81 | ## Project Structure
82 |
83 | - **`dist`**: contains built file for distribution. Note this directory is only updated when a release happens; they do not reflect the latest changes in development.
84 |
85 | - **`docs`**: contains documentation. Powered by [Vuepress](https://github.com/vuejs/vuepress).
86 |
87 | - **`src`**: contains the source code, obviously. The codebase is written in ES2015.
88 |
89 | - **`components`**: contains code for the core single-file component (`InfiniteLoading.vue`) and spinner single-file component (`Spinner.vue`).
90 |
91 | - **`styles`**: contains code for styles of different spinners, they are written with [Less](http://lesscss.org/).
92 |
93 | - **`config.js`**: contains all the runtime configurations for this plugin.
94 |
95 | - **`utils.js`**: contains all the tool functions for this plugin.
96 |
97 | - **`index.js`**: entry file, contains plugin `install` API definition and the logic to register `InfiniteLoading` component.
98 |
99 | - **`scripts`**: contains all the scripts use to developing, testing, building and deploying documentation.
100 |
101 | - **`test`**: contains unit tests. They are written with [Mocha](https://mochajs.org/) and run with [Karma](https://karma-runner.github.io/2.0/index.html).
102 |
103 | - **`types`**: contains TypeScript type definitions.
104 |
--------------------------------------------------------------------------------
/docs/api/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # API
6 |
7 | ## Props
8 |
9 | The default value for most of properties can be overridden through the Plugin API.
10 |
11 | - See also: [Configure Plugin Options - Props/Settings](../guide/configure-plugin-opts.md#props-settings)
12 |
13 | ### distance
14 |
15 | - Type: `Number`
16 | - Default: `100`
17 | - Details:
18 |
19 | The `infinite` event will be fired if the scroll distance is less than this value. If `direction` is set to `top`, it will calculate the distance between the scroll bar and the top, if `direction` is set to `bottom`, it will calculate the distance between the scroll bar and the bottom.
20 |
21 | ### spinner
22 |
23 | - Type: `String`
24 | - Default: `default`
25 | - Available: `default` | `spiral` | `circles` | `bubbles` | `waveDots`
26 | - Details:
27 |
28 | This property is used to set the loading animation, you can choose one from the internal spinners that you like, you can also customize it with a [named slot](#spinner-2) that called `spinner`.
29 |
30 | - See also: [Configure Load Messages](../guide/configure-load-msg.md)
31 |
32 | ### direction
33 |
34 | - Type: `String`
35 | - Default: `bottom`
36 | - Available: `top` | `bottom`
37 | - Details:
38 |
39 | This property is used to set the load direction.
40 |
41 | ### forceUseInfiniteWrapper
42 |
43 | - Type: `Boolean` | `String`
44 | - Default: `false`
45 | - Details:
46 |
47 | By default, the component will search for the closest parent element which has `overflow-y: auto | scroll` CSS style as the scroll container, this property is used to force to specify the scroll container, usually used when the case has complex layout or 3rd-party scroll plugin (eg: [`perfect-scrollbar`](https://github.com/noraesae/perfect-scrollbar)).
48 |
49 | If this value set be `true`, the component will search the closest parent element which has `infinite-wrapper` attribute as the scroll container, if this value is a string, the component will use it as a CSS selector, and search the element as the scroll container via the `querySelector` API, if all failed, the component will use `window` as the scroll container.
50 |
51 | ### identifier
52 |
53 | - Type: `any`
54 | - Default: `+new Date()`
55 | - Details:
56 |
57 | The component will be reset if this property has changed, just like recreating a new component, usually used when the case has filter or tabs.
58 |
59 | ## Slots
60 |
61 | ::: warning
62 | Vue.js [deprecated slot special attributes](https://vuejs.org/v2/api/#slot-deprecated) after v2.6.0, it is recommended to use the [v-slot directive](https://vuejs.org/v2/api/#v-slot).
63 | :::
64 |
65 | The contents for these slots can be configured via the [`v-slot` directives](https://vuejs.org/v2/api/#v-slot), also can be configure via the plugin API.
66 |
67 | - See also:
68 | - [Configure Load Messages](../guide/configure-load-msg.md)
69 | - [Configure Plugin Options - Slots](../guide/configure-plugin-opts.md#slots)
70 |
71 | ### no-results
72 |
73 | - Default: `No results :(`
74 | - Details:
75 |
76 | This message will be displayed if there is no data, it means we did not call the `$state.loaded` method before calling the `$stat.complete` method.
77 |
78 | ### no-more
79 |
80 | - Default: `No more data :)`
81 | - Details:
82 |
83 | This message will be displayed if there is no more data, it means we called the `$state.loaded` method before calling the `$state.complete` method.
84 |
85 | ### error
86 |
87 | - Default: `Opps, something went wrong :( Retry `
88 | - Details:
89 |
90 | This message will be displayed if loading failed, it means we called the `$state.error` method.
91 |
92 | ### spinner
93 |
94 | - Default: `Internal Spinner`
95 | - Details:
96 |
97 | This slot will be displayed when loading data, you can customize your own spinner through it.
98 |
99 | ## Events
100 |
101 | ### infinite
102 |
103 | - Argument: `event`
104 | - Details:
105 |
106 | This event will be fired if the scroll distance is less than the `distance` property, the component will pass a special event argument for the event handler to change loading status, usually we name it `$state`, include these methods:
107 |
108 | #### $state.loaded
109 |
110 | Inform the component that this loading has been successful, and the `infinite` event will be fired again if the first screen was not be filled up, otherwise, the component will hide the loading animation and continue to listen scroll event.
111 |
112 | #### $state.complete
113 |
114 | Inform the component that all the data has been loaded successfully, if the `$state.loaded` method has not been called before this, the content of `no-results` slot will be displayed, otherwise, the content of `no-more` slot will be displayed.
115 |
116 | #### $state.error
117 |
118 | Inform the component that this loading failed, the content of `error` slot will be displayed.
119 |
120 | #### $state.reset
121 |
122 | Reset the component, same as changing the `identifier` property.
123 |
124 | ## Options
125 |
126 | You can configure all these plugin options via the plugin API.
127 |
128 | - See also: [Configure Plugin Options](../guide/configure-plugin-opts.md)
129 |
130 | ### props.spinner
131 |
132 | - Type: `String`
133 | - Details:
134 |
135 | Configure the default value for `spinner` property.
136 |
137 | - See also: [Properties - spinner](#spinner)
138 |
139 | ### props.distance
140 |
141 | - Type: `Number`
142 | - Details:
143 |
144 | Configure the default value for `distance` property.
145 |
146 | ::: warning
147 | This option is read with a lower priority than [Options - slots.spinner](#slots-spinner), it means if you configure `slots.spinner` correctly, this option will never take effect
148 | :::
149 |
150 | - See also: [Properties - distance](#distance)
151 |
152 | ### props.forceUseInfiniteWrapper
153 |
154 | - Type: `Boolean` | `String`
155 | - Details:
156 |
157 | Configure the default value for `forceUseInfiniteWrapper` property.
158 |
159 | - See also: [Properties - forceUseInfiniteWrapper](#forceuseinfinitewrapper)
160 |
161 | ### slots.noResults
162 |
163 | - Type: `String` | `Vue Component`
164 | - Details:
165 |
166 | Configure the default content for `no-results` slot.
167 |
168 | - See also: [Slots - no-results](#no-results)
169 |
170 | ### slots.noMore
171 |
172 | - Type: `String` | `Vue Component`
173 | - Details:
174 |
175 | Configure the default content for `no-more` slot.
176 |
177 | - See also: [Slots - no-more](#no-more)
178 |
179 | ### slots.error
180 |
181 | - Type: `String` | `Vue Component`
182 | - Details:
183 |
184 | Configure the default content for `error` slot.
185 |
186 | - See also: [Slots - error](#error)
187 |
188 | ### slots.errorBtnText
189 |
190 | - Type: `String`
191 | - Default: `Retry`
192 | - Details:
193 |
194 | Configure the default text for retry button in the default `error` slot. Please note, it won't work if you customize the `error` slot, you need to configure retry button yourself.
195 |
196 | - See also:
197 | - [Slots - error](#error)
198 | - [Configure Load Messages](../guide/configure-load-msg.md)
199 |
200 | ### slots.spinner
201 |
202 | - Type: `String` | `Vue Component`
203 | - Details:
204 |
205 | Configure the default content for `spinner` slot.
206 |
207 | - See also: [Slots - spinner](#spinner-2)
208 |
209 | ### system.throttleLimit
210 |
211 | - Type: `Number`
212 | - Default: `50`
213 | - Details:
214 |
215 | Configure the default throttle space of time for `scroll` event (unit: ms).
216 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/layouts/Layout.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
16 |
20 |
21 |
25 |
26 |
30 |
39 |
40 |
41 |
42 |
43 |
44 |
53 |
54 |
55 |
56 |
57 |
58 |
62 |
64 |
65 |
94 |
95 |
369 |
--------------------------------------------------------------------------------
/src/components/InfiniteLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
10 |
11 |
15 |
16 | {{ slots.noResults }}
18 |
19 |
20 |
24 |
25 | {{ slots.noMore }}
27 |
28 |
29 |
33 |
34 |
38 |
39 |
40 | {{ slots.error }}
41 |
46 |
47 |
48 |
49 |
50 |
52 |
345 |
381 |
--------------------------------------------------------------------------------
/dist/vue-infinite-loading.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * vue-infinite-loading v2.4.5
3 | * (c) 2016-2020 PeachScript
4 | * MIT License
5 | */
6 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueInfiniteLoading=e():t.VueInfiniteLoading=e()}(this,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var a=e[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(i,a,function(e){return t[e]}.bind(null,a));return i},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=9)}([function(t,e,n){var i=n(6);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(3).default)("6223ff68",i,!0,{})},function(t,e,n){var i=n(8);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(3).default)("27f0e51f",i,!0,{})},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var a=(o=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),r=i.sources.map((function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"}));return[n].concat(r).concat([a]).join("\n")}var o;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},a=0;an.parts.length&&(i.parts.length=n.parts.length)}else{var o=[];for(a=0;a',"\nscript:\n...\ninfiniteHandler($state) {\n ajax('https://www.example.com/api/news')\n .then((res) => {\n if (res.data.length) {\n $state.loaded();\n } else {\n $state.complete();\n }\n });\n}\n...","","more details: https://github.com/PeachScript/vue-infinite-loading/issues/57#issuecomment-324370549"].join("\n"),INFINITE_EVENT:"`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.",IDENTIFIER:"the `reset` event will be deprecated soon, please reset this component by change the `identifier` property."},o={INFINITE_LOOP:["executed the callback function more than ".concat(i.loopCheckMaxCalls," times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:"),'\n\x3c!-- add a special attribute for the real scroll wrapper --\x3e\n\n ...\n \x3c!-- set force-use-infinite-wrapper --\x3e\n
\nor\n\n ...\n \x3c!-- set force-use-infinite-wrapper as css selector of the real scroll wrapper --\x3e\n
\n ',"more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169"].join("\n")},s={READY:0,LOADING:1,COMPLETE:2,ERROR:3},l={color:"#666",fontSize:"14px",padding:"10px 0"},d={mode:"development",props:{spinner:"default",distance:100,forceUseInfiniteWrapper:!1},system:i,slots:{noResults:"No results :(",noMore:"No more data :)",error:"Opps, something went wrong :(",errorBtnText:"Retry",spinner:""},WARNINGS:r,ERRORS:o,STATUS:s},c=n(4),u=n.n(c),p={BUBBLES:{render:function(t){return t("span",{attrs:{class:"loading-bubbles"}},Array.apply(Array,Array(8)).map((function(){return t("span",{attrs:{class:"bubble-item"}})})))}},CIRCLES:{render:function(t){return t("span",{attrs:{class:"loading-circles"}},Array.apply(Array,Array(8)).map((function(){return t("span",{attrs:{class:"circle-item"}})})))}},DEFAULT:{render:function(t){return t("i",{attrs:{class:"loading-default"}})}},SPIRAL:{render:function(t){return t("i",{attrs:{class:"loading-spiral"}})}},WAVEDOTS:{render:function(t){return t("span",{attrs:{class:"loading-wave-dots"}},Array.apply(Array,Array(5)).map((function(){return t("span",{attrs:{class:"wave-item"}})})))}}};function f(t,e,n,i,a,r,o,s){var l,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),i&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=l):a&&(l=s?function(){a.call(this,this.$root.$options.shadowRoot)}:a),l)if(d.functional){d._injectStyles=l;var c=d.render;d.render=function(t,e){return l.call(e),c(t,e)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,l):[l]}return{exports:t,options:d}}var b=f({name:"Spinner",computed:{spinnerView:function(){return p[(this.$attrs.spinner||"").toUpperCase()]||this.spinnerInConfig},spinnerInConfig:function(){return d.slots.spinner&&"string"==typeof d.slots.spinner?{render:function(){return this._v(d.slots.spinner)}}:"object"===u()(d.slots.spinner)?d.slots.spinner:p[d.props.spinner.toUpperCase()]||p.DEFAULT}}},(function(){var t=this.$createElement;return(this._self._c||t)(this.spinnerView,{tag:"component"})}),[],!1,(function(t){var e=n(5);e.__inject__&&e.__inject__(t)}),"46b20d22",null).exports;function h(t){"production"!==d.mode&&console.warn("[Vue-infinite-loading warn]: ".concat(t))}function m(t){console.error("[Vue-infinite-loading error]: ".concat(t))}var g={timers:[],caches:[],throttle:function(t){var e=this;-1===this.caches.indexOf(t)&&(this.caches.push(t),this.timers.push(setTimeout((function(){t(),e.caches.splice(e.caches.indexOf(t),1),e.timers.shift()}),d.system.throttleLimit)))},reset:function(){this.timers.forEach((function(t){clearTimeout(t)})),this.timers.length=0,this.caches=[]}},v={isChecked:!1,timer:null,times:0,track:function(){var t=this;this.times+=1,clearTimeout(this.timer),this.timer=setTimeout((function(){t.isChecked=!0}),d.system.loopCheckTimeout),this.times>d.system.loopCheckMaxCalls&&(m(o.INFINITE_LOOP),this.isChecked=!0)}},w={key:"_infiniteScrollHeight",getScrollElm:function(t){return t===window?document.documentElement:t},save:function(t){var e=this.getScrollElm(t);e[this.key]=e.scrollHeight},restore:function(t){var e=this.getScrollElm(t);"number"==typeof e[this.key]&&(e.scrollTop=e.scrollHeight-e[this.key]+e.scrollTop),this.remove(e)},remove:function(t){void 0!==t[this.key]&&delete t[this.key]}};function y(t){return t.replace(/[A-Z]/g,(function(t){return"-".concat(t.toLowerCase())}))}function x(t){return t.offsetWidth+t.offsetHeight>0}var k=f({name:"InfiniteLoading",data:function(){return{scrollParent:null,scrollHandler:null,isFirstLoad:!0,status:s.READY,slots:d.slots}},components:{Spinner:b},computed:{isShowSpinner:function(){return this.status===s.LOADING},isShowError:function(){return this.status===s.ERROR},isShowNoResults:function(){return this.status===s.COMPLETE&&this.isFirstLoad},isShowNoMore:function(){return this.status===s.COMPLETE&&!this.isFirstLoad},slotStyles:function(){var t=this,e={};return Object.keys(d.slots).forEach((function(n){var i=y(n);(!t.$slots[i]&&!d.slots[n].render||t.$slots[i]&&!t.$slots[i][0].tag)&&(e[n]=l)})),e}},props:{distance:{type:Number,default:d.props.distance},spinner:String,direction:{type:String,default:"bottom"},forceUseInfiniteWrapper:{type:[Boolean,String],default:d.props.forceUseInfiniteWrapper},identifier:{default:+new Date},onInfinite:Function},watch:{identifier:function(){this.stateChanger.reset()}},mounted:function(){var t=this;this.$watch("forceUseInfiniteWrapper",(function(){t.scrollParent=t.getScrollParent()}),{immediate:!0}),this.scrollHandler=function(e){t.status===s.READY&&(e&&e.constructor===Event&&x(t.$el)?g.throttle(t.attemptLoad):t.attemptLoad())},setTimeout((function(){t.scrollHandler(),t.scrollParent.addEventListener("scroll",t.scrollHandler,a)}),1),this.$on("$InfiniteLoading:loaded",(function(e){t.isFirstLoad=!1,"top"===t.direction&&t.$nextTick((function(){w.restore(t.scrollParent)})),t.status===s.LOADING&&t.$nextTick(t.attemptLoad.bind(null,!0)),e&&e.target===t||h(r.STATE_CHANGER)})),this.$on("$InfiniteLoading:complete",(function(e){t.status=s.COMPLETE,t.$nextTick((function(){t.$forceUpdate()})),t.scrollParent.removeEventListener("scroll",t.scrollHandler,a),e&&e.target===t||h(r.STATE_CHANGER)})),this.$on("$InfiniteLoading:reset",(function(e){t.status=s.READY,t.isFirstLoad=!0,w.remove(t.scrollParent),t.scrollParent.addEventListener("scroll",t.scrollHandler,a),setTimeout((function(){g.reset(),t.scrollHandler()}),1),e&&e.target===t||h(r.IDENTIFIER)})),this.stateChanger={loaded:function(){t.$emit("$InfiniteLoading:loaded",{target:t})},complete:function(){t.$emit("$InfiniteLoading:complete",{target:t})},reset:function(){t.$emit("$InfiniteLoading:reset",{target:t})},error:function(){t.status=s.ERROR,g.reset()}},this.onInfinite&&h(r.INFINITE_EVENT)},deactivated:function(){this.status===s.LOADING&&(this.status=s.READY),this.scrollParent.removeEventListener("scroll",this.scrollHandler,a)},activated:function(){this.scrollParent.addEventListener("scroll",this.scrollHandler,a)},methods:{attemptLoad:function(t){var e=this;this.status!==s.COMPLETE&&x(this.$el)&&this.getCurrentDistance()<=this.distance?(this.status=s.LOADING,"top"===this.direction&&this.$nextTick((function(){w.save(e.scrollParent)})),"function"==typeof this.onInfinite?this.onInfinite.call(null,this.stateChanger):this.$emit("infinite",this.stateChanger),!t||this.forceUseInfiniteWrapper||v.isChecked||v.track()):this.status===s.LOADING&&(this.status=s.READY)},getCurrentDistance:function(){var t;"top"===this.direction?t="number"==typeof this.scrollParent.scrollTop?this.scrollParent.scrollTop:this.scrollParent.pageYOffset:t=this.$el.getBoundingClientRect().top-(this.scrollParent===window?window.innerHeight:this.scrollParent.getBoundingClientRect().bottom);return t},getScrollParent:function(){var t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.$el;return"string"==typeof this.forceUseInfiniteWrapper&&(t=document.querySelector(this.forceUseInfiniteWrapper)),t||("BODY"===e.tagName?t=window:!this.forceUseInfiniteWrapper&&["scroll","auto"].indexOf(getComputedStyle(e).overflowY)>-1?t=e:(e.hasAttribute("infinite-wrapper")||e.hasAttribute("data-infinite-wrapper"))&&(t=e)),t||this.getScrollParent(e.parentNode)}},destroyed:function(){!this.status!==s.COMPLETE&&(g.reset(),w.remove(this.scrollParent),this.scrollParent.removeEventListener("scroll",this.scrollHandler,a))}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"infinite-loading-container"},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowSpinner,expression:"isShowSpinner"}],staticClass:"infinite-status-prompt",style:t.slotStyles.spinner},[t._t("spinner",[n("spinner",{attrs:{spinner:t.spinner}})])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowNoResults,expression:"isShowNoResults"}],staticClass:"infinite-status-prompt",style:t.slotStyles.noResults},[t._t("no-results",[t.slots.noResults.render?n(t.slots.noResults,{tag:"component"}):[t._v(t._s(t.slots.noResults))]])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowNoMore,expression:"isShowNoMore"}],staticClass:"infinite-status-prompt",style:t.slotStyles.noMore},[t._t("no-more",[t.slots.noMore.render?n(t.slots.noMore,{tag:"component"}):[t._v(t._s(t.slots.noMore))]])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowError,expression:"isShowError"}],staticClass:"infinite-status-prompt",style:t.slotStyles.error},[t._t("error",[t.slots.error.render?n(t.slots.error,{tag:"component",attrs:{trigger:t.attemptLoad}}):[t._v("\n "+t._s(t.slots.error)+"\n "),n("br"),t._v(" "),n("button",{staticClass:"btn-try-infinite",domProps:{textContent:t._s(t.slots.errorBtnText)},on:{click:t.attemptLoad}})]],{trigger:t.attemptLoad})],2)])}),[],!1,(function(t){var e=n(7);e.__inject__&&e.__inject__(t)}),"644ea9c9",null).exports;function E(t){d.mode=t.config.productionTip?"development":"production"}Object.defineProperty(k,"install",{configurable:!1,enumerable:!1,value:function(t,e){Object.assign(d.props,e&&e.props),Object.assign(d.slots,e&&e.slots),Object.assign(d.system,e&&e.system),t.component("infinite-loading",k),E(t)}}),"undefined"!=typeof window&&window.Vue&&(window.Vue.component("infinite-loading",k),E(window.Vue));e.default=k}])}));
--------------------------------------------------------------------------------
/test/unit/specs/InfiniteLoading.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import Vue from 'vue/dist/vue.common';
4 | import { isShow, continuesCall, fakeBox } from '../utils';
5 | import config from '../../../src/config';
6 | import { loopTracker } from '../../../src/utils';
7 | import InfiniteLoading from '../../../src/components/InfiniteLoading.vue';
8 |
9 | describe('vue-infinite-loading:component', () => {
10 | let vm; // save Vue model
11 | const basicConfig = {
12 | data: {
13 | list: [],
14 | isDivScroll: false,
15 | direction: 'bottom',
16 | spinner: 'default',
17 | },
18 | template: `
19 |
31 | `,
32 | components: { InfiniteLoading },
33 | methods: {
34 | infiniteHandler() {},
35 | },
36 | };
37 |
38 | before(() => {
39 | // insert global CSS
40 | const styles = document.createElement('style');
41 |
42 | styles.id = 'testing-style';
43 | styles.innerHTML = `
44 | body {
45 | margin: 0;
46 | }
47 | div {
48 | height: 200px;
49 | }
50 | ul {
51 | list-style: none;
52 | margin: 0;
53 | padding: 0;
54 | }
55 | ul li {
56 | height: 40px;
57 | }
58 | `;
59 |
60 | document.body.appendChild(styles);
61 |
62 | // use development mode
63 | config.mode = 'development';
64 | });
65 |
66 | after(() => {
67 | // remove global CSS
68 | document.getElementById('testing-style').remove();
69 |
70 | // restore app mode
71 | config.mode = Vue.config.productionTip ? 'development' : 'production';
72 | });
73 |
74 | beforeEach(() => {
75 | // create Vue model before each case start
76 | const container = document.createElement('div');
77 |
78 | container.id = 'app';
79 | document.body.appendChild(container);
80 | });
81 |
82 | afterEach(() => {
83 | basicConfig.data.list = [];
84 | // destroy Vue model after each case complete
85 | vm.$el.parentNode.removeChild(vm.$el);
86 |
87 | if (vm.$refs.infiniteLoading) {
88 | vm.$refs.infiniteLoading.$destroy();
89 | }
90 |
91 | if (document.getElementById('app')) {
92 | document.getElementById('app').remove();
93 | }
94 | });
95 |
96 | it('should complete a standard life circle\n (init -> loading -> loaded -> complete)', (done) => {
97 | vm = new Vue(Object.assign({}, basicConfig, {
98 | methods: {
99 | infiniteHandler: function infiniteHandler($state) {
100 | for (let i = 0, j = this.list.length; i < 3; i += 1) {
101 | this.list.push(j + i);
102 | }
103 |
104 | const expectedLength = this.list.length;
105 | const isComplete = expectedLength > 6;
106 |
107 | // check spinner
108 | expect(isShow(this.$el.querySelector('.loading-default'))).to.be.true;
109 |
110 | if (isComplete) {
111 | $state.complete();
112 | } else {
113 | $state.loaded();
114 | }
115 |
116 | this.$nextTick(() => {
117 | // check list items
118 | expect(this.$el.querySelectorAll('ul li')).to.have.lengthOf(expectedLength);
119 |
120 | if (isComplete) {
121 | // check no more text
122 | expect(isShow(this.$el.querySelector('.infinite-status-prompt:nth-child(3)'))).to.be.true;
123 | done();
124 | }
125 | });
126 | },
127 | },
128 | }));
129 |
130 | vm.$mount('#app');
131 | });
132 |
133 | it('should not trigger load again before the last load is complete\n (use div as the container and spiral spinner)', (done) => {
134 | vm = new Vue(Object.assign({}, basicConfig, {
135 | data: {
136 | list: [],
137 | isDivScroll: true,
138 | direction: 'bottom',
139 | spinner: 'spiral',
140 | },
141 | methods: {
142 | infiniteHandler: function infiniteHandler() {
143 | const { scrollParent } = this.$refs.infiniteLoading;
144 | const loadCountEachTime = 10;
145 |
146 | this.list.push(...new Array(loadCountEachTime + 1).join('1').split(''));
147 | this.$nextTick(() => {
148 | // trigger scroll event manually
149 | scrollParent.scrollTop = scrollParent.scrollHeight;
150 |
151 | // wait for the scroll event handler process scroll event
152 | setTimeout(() => {
153 | expect(this.list).to.have.lengthOf(loadCountEachTime);
154 | done();
155 | }, 10);
156 | });
157 | },
158 | },
159 | }));
160 |
161 | vm.$mount('#app');
162 | });
163 |
164 | it('should works again when reset it after a completion\n (use top direction and bubbles spinner)', (done) => {
165 | let calledTimes = 0;
166 |
167 | vm = new Vue(Object.assign({}, basicConfig, {
168 | data: {
169 | list: [],
170 | isDivScroll: false,
171 | direction: 'top',
172 | spinner: 'bubbles',
173 | },
174 | methods: {
175 | infiniteHandler: function infiniteHandler($state) {
176 | calledTimes += 1;
177 |
178 | if (calledTimes === 1) {
179 | $state.complete();
180 | this.$nextTick(() => {
181 | // check no results text
182 | expect(isShow(this.$el.querySelector('.infinite-status-prompt:nth-child(2)'))).to.be.true;
183 |
184 | // reset component
185 | $state.reset();
186 | });
187 | } else if (calledTimes === 2) {
188 | // check spinner
189 | expect(isShow(this.$el.querySelector('.loading-bubbles'))).to.be.true;
190 | done();
191 | }
192 | },
193 | },
194 | }));
195 |
196 | vm.$mount('#app');
197 | });
198 |
199 | it('should always load data until fill up the container\n (use div as the container and circles spinner)', (done) => {
200 | let timer;
201 |
202 | vm = new Vue(Object.assign({}, basicConfig, {
203 | data: {
204 | list: [],
205 | isDivScroll: true,
206 | direction: 'bottom',
207 | spinner: 'circles',
208 | },
209 | methods: {
210 | infiniteHandler: function infiniteHandler($state) {
211 | this.list.push(this.list.length + 1);
212 | this.$nextTick(() => {
213 | $state.loaded();
214 | });
215 |
216 | // wait for the container be filled up
217 | clearTimeout(timer);
218 | timer = setTimeout(() => {
219 | const listHeight = parseInt(getComputedStyle(this.$el.querySelector('ul')).height, 10);
220 | const itemHeight = parseInt(getComputedStyle(this.$el.querySelector('li')).height, 10);
221 | const expectedCount = listHeight / itemHeight;
222 |
223 | expect(this.list.length).to.be.at.least(expectedCount);
224 | done();
225 | }, 100);
226 | },
227 | },
228 | }));
229 |
230 | vm.$mount('#app');
231 | });
232 |
233 | it('should works properly with scroll plugins through the `infinite-wrapper` property', (done) => {
234 | const app = document.getElementById('app');
235 | const wrapper = document.createElement('div');
236 |
237 | app.appendChild(wrapper);
238 | app.setAttribute('infinite-wrapper', ''); // add `infinite-wrapper` property for app container
239 | vm = new Vue(Object.assign({}, basicConfig, {
240 | methods: {
241 | infiniteHandler: function infiniteHandler() {
242 | expect(this.$refs.infiniteLoading.scrollParent).to.equal(app);
243 | done();
244 | },
245 | },
246 | }));
247 |
248 | vm.$mount(wrapper);
249 | });
250 |
251 | it('should not works when deactivated by the `keep-alive` feature\n (use top direction and use div as the container)', (done) => {
252 | let calledTimes = 0;
253 | const InfiniteView = Object.assign({}, basicConfig, {
254 | data() {
255 | return {
256 | list: [],
257 | isDivScroll: true,
258 | direction: 'top',
259 | spinner: 'unknown',
260 | };
261 | },
262 | methods: {
263 | infiniteHandler: function infiniteHandler($state) {
264 | calledTimes += 1;
265 |
266 | if (calledTimes === 1) {
267 | // change view to deactivate the component
268 | this.$parent.currentView = null;
269 | this.$nextTick(() => {
270 | // trigger loaded event
271 | $state.loaded();
272 | this.$nextTick(() => {
273 | // doesnot care the loaded event when it be deactivated
274 | expect(calledTimes).to.equal(1);
275 | done();
276 | });
277 | });
278 | }
279 | },
280 | },
281 | });
282 |
283 | vm = new Vue({
284 | data: {
285 | currentView: 'InfiniteView',
286 | },
287 | template: `
288 |
289 |
291 | `,
292 | components: {
293 | InfiniteView,
294 | },
295 | });
296 |
297 | vm.$mount('#app');
298 | });
299 |
300 | it('should still works properly with the deprecated property `:on-infinite` but throw warning', (done) => {
301 | let isThrowWarn;
302 |
303 | console.warn = fakeBox(console.warn, (text) => {
304 | if (text.indexOf('@infinite') > -1) {
305 | isThrowWarn = true;
306 | }
307 | });
308 |
309 | vm = new Vue(Object.assign({}, basicConfig, {
310 | methods: {
311 | onInfinite: function onInfinite() {
312 | expect(isThrowWarn).to.be.true;
313 | console.warn = fakeBox();
314 | done();
315 | },
316 | },
317 | template: `
318 |
321 |
322 | `,
323 | }));
324 |
325 | vm.$mount('#app');
326 | });
327 |
328 | it('should interpolate custom spinner slot', (done) => {
329 | vm = new Vue(Object.assign({}, basicConfig, {
330 | mounted: function mounted() {
331 | expect(this.$el.querySelector('.icon-spinner')).to.be.not.null;
332 | done();
333 | },
334 | template: `
335 |
336 |
337 |
339 |
340 | `,
341 | }));
342 |
343 | vm.$mount('#app');
344 | });
345 |
346 | it('should remove slot styles if does not configure with `template` tag', (done) => {
347 | vm = new Vue(Object.assign({}, basicConfig, {
348 | methods: {
349 | infiniteHandler: function infiniteHandler($state) {
350 | // expect empty styles for no results slot
351 | expect(this.$el.querySelector('.infinite-status-prompt:nth-child(2)').style.color).to.be.empty;
352 |
353 | // expect valid styles for no more slot
354 | expect(this.$el.querySelector('.infinite-status-prompt:nth-child(3)').style.color).to.not.be.empty;
355 | $state.complete();
356 | done();
357 | },
358 | },
359 | template: `
360 |
361 |
363 | `,
364 | }));
365 |
366 | vm.$mount('#app');
367 | });
368 |
369 | it('should throttle properly for the scroll event handler\n (use div as the container and wave dots spinner)', (done) => {
370 | vm = new Vue(Object.assign({}, basicConfig, {
371 | data: {
372 | list: [...new Array(20).join('1').split('')],
373 | isDivScroll: true,
374 | direction: 'bottom',
375 | spinner: 'waveDots',
376 | },
377 | mounted: function mounted() {
378 | const { scrollParent } = this.$refs.infiniteLoading;
379 | const spyFn = sinon.spy(this.$refs.infiniteLoading, 'attemptLoad');
380 | const alreadyCalledTimes = 1; // it will be called immediately after mount
381 |
382 | continuesCall(() => {
383 | scrollParent.scrollTop += 10;
384 | }, 10, () => {
385 | expect(spyFn).to.have.been.callCount(0 + alreadyCalledTimes);
386 | setTimeout(() => {
387 | expect(spyFn).to.have.been.callCount(1 + alreadyCalledTimes);
388 | done();
389 | }, config.system.throttleLimit + 10);
390 | });
391 | },
392 | }));
393 |
394 | vm.$mount('#app');
395 | });
396 |
397 | it('should still works properly with the $refs.component.$emit but throw warning', (done) => {
398 | let throwWarnTimes = 0;
399 |
400 | console.warn = fakeBox(console.warn, (text) => {
401 | if (text.indexOf('$state') > -1) {
402 | throwWarnTimes += 1;
403 | }
404 | });
405 |
406 | vm = new Vue(Object.assign({}, basicConfig, {
407 | methods: {
408 | infiniteHandler: function infiniteHandler() {
409 | if (!throwWarnTimes) {
410 | this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
411 | } else {
412 | this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
413 | expect(throwWarnTimes).to.equal(2);
414 | console.warn = fakeBox();
415 | done();
416 | }
417 | },
418 | },
419 | }));
420 |
421 | vm.$mount('#app');
422 | });
423 |
424 | it('should find my forcible element as scroll wrapper when using `force-use-infinite-wrapper` property', (done) => {
425 | vm = new Vue(Object.assign({}, basicConfig, {
426 | template: `
427 |
443 | `,
444 | methods: {
445 | infiniteHandler: function infiniteHandler() {
446 | expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el);
447 | done();
448 | },
449 | },
450 | }));
451 |
452 | vm.$mount('#app');
453 | });
454 |
455 | it('should throw error when the component be in a infinite loop caused by a wrapper with unfixed height', (done) => {
456 | let isThrowError;
457 |
458 | console.error = fakeBox(console.error, (text) => {
459 | if (text.indexOf('issues/55') > -1) {
460 | isThrowError = true;
461 | }
462 | });
463 |
464 | vm = new Vue(Object.assign({}, basicConfig, {
465 | template: `
466 |
477 | `,
478 | methods: {
479 | infiniteHandler: function infiniteHandler($state) {
480 | if (!isThrowError) {
481 | this.list.push(this.list.length + 1);
482 | $state.loaded();
483 | } else {
484 | $state.complete();
485 | expect(isThrowError).to.be.true;
486 | console.error = fakeBox();
487 | // wait for the loop check flag be marked as true
488 | setTimeout(() => {
489 | expect(loopTracker.isChecked).to.be.true;
490 | done();
491 | }, config.system.loopCheckTimeout);
492 | }
493 | },
494 | },
495 | }));
496 |
497 | vm.$mount('#app');
498 | });
499 |
500 | it('should search scroll wrapper again when change the `force-use-infinite-wrapper` property', (done) => {
501 | vm = new Vue(Object.assign({}, basicConfig, {
502 | data: {
503 | forceUseInfiniteWrapper: true,
504 | },
505 | template: `
506 |
507 |
508 |
513 |
514 |
515 |
572 |
balabala
573 |
577 |
578 |
Loading...
` };
652 |
653 | vm = new Vue(Object.assign({}, basicConfig, {
654 | template: `
655 |
657 |
658 | `,
659 | methods: {
660 | infiniteHandler: function infiniteHandler() {
661 | // assert custom spinner
662 | expect(this.$el.querySelector(`#${spinnerId}`)).to.be.not.null;
663 |
664 | // restore config
665 | config.slots.spinner = '';
666 | done();
667 | },
668 | },
669 | }));
670 |
671 | vm.$mount('#app');
672 | });
673 |
674 | it('should support use a string as the default spinner', (done) => {
675 | config.slots.spinner = 'custom-spinner';
676 |
677 | vm = new Vue(Object.assign({}, basicConfig, {
678 | template: `
679 |
681 |
682 | `,
683 | methods: {
684 | infiniteHandler: function infiniteHandler() {
685 | // assert custom spinner
686 | expect(this.$el.innerHTML).to.contain(config.slots.spinner);
687 |
688 | // restore config
689 | config.slots.spinner = '';
690 | done();
691 | },
692 | },
693 | }));
694 |
695 | vm.$mount('#app');
696 | });
697 |
698 | it('should save and restore scroll bar when using top direction', (done) => {
699 | vm = new Vue(Object.assign({}, basicConfig, {
700 | data: {
701 | list: [1, 2, 3, 4, 5],
702 | },
703 | template: `
704 |
713 | `,
714 | methods: {
715 | infiniteHandler($state) {
716 | expect(this.$el.scrollTop).to.equal(0);
717 | this.list.push(6, 7, 8, 9, 10);
718 | $state.loaded();
719 |
720 | // wait for scroll bar restore
721 | setTimeout(() => {
722 | expect(this.$el.scrollTop).to.not.equal(0);
723 | done();
724 | }, 100);
725 | },
726 | },
727 | }));
728 |
729 | vm.$mount('#app');
730 | });
731 | });
732 |
--------------------------------------------------------------------------------
4 | 
5 | 
6 | 
7 | 
8 | 