docs: add en and zh configure load msg page

Author: PeachScript

docs/.vuepress/config.js

@@ -31,6 +31,7 @@ module.exports = {
             '',
             'start-with-hn',
             'use-with-filter-or-tabs',
+            'configure-load-msg',
             'configure-plugin-opts',
           ],
         },
@@ -67,6 +68,7 @@ module.exports = {
             '',
             'start-with-hn',
             'use-with-filter-or-tabs',
+            'configure-load-msg',
             'configure-plugin-opts',
           ],
         },

docs/api/README.md

@@ -6,7 +6,9 @@ sidebar: auto
 
 ## Props
 
-The default value for these properties can be overridden through the Plugin API.
+The default value for most of properties can be overridden through the Plugin API.
+
+- See also: [Configure Plugin Options - Props/Settings](../guide/configure-plugin-opts.md#props-settings)
 
 ### distance
 
@@ -23,7 +25,7 @@ The `infinite` event will be fired if the scroll distance is less than this valu
 - Available: `default` | `spiral` | `circles` | `bubbles` | `waveDots`
 - Details: 
 
-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](https://vuejs.org/v2/guide/components.html#Named-Slots) that called `spinner`.
+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`.
 
 ### direction
 
@@ -56,6 +58,10 @@ The comopnent will be reset if this property has changed, just like recreating a
 
 The contents for these slots can be configured via the [`slot` special attribute](https://vuejs.org/v2/api/index.html#slot), also can be configure via the plugin API.
 
+- See also:
+  - [Configure Load Messages](../guide/configure-load-msg.md)
+  - [Configure Plugin Options - Slots](../guide/configure-plugin-opts.md#slots)
+
 ### no-results
 
 - Default: `No results :(`

docs/guide/configure-load-msg.md

@@ -0,0 +1,53 @@
+# Configure Load Messages
+
+This component provide four different slots use to display different load messages: `spinner`, `no-more`, `no-results`, `error`, you can read more about it in [here](../api/#slots).
+
+## Via `slot` Sepcial Attribute
+
+We can use the [`slot` special attribute](https://vuejs.org/v2/api/index.html#slot) to configure them:
+
+``` html
+<infinite-loading>
+  <div slot="spinner">Loading...</div>
+  <div slot="no-more">No more message</div>
+  <div slot="no-results">No results message</div>
+</infinite-loading>
+```
+
+Unlike other slots, the default value for the `error` slot will provide a retry button for users to load data again. If you want to impletement a retry button for users when you customize the `error` slot, you can use the [`slot-scope`](https://vuejs.org/v2/api/index.html#slot-scope) feature, like this:
+
+``` html
+<infinite-loading>
+  <div slot="error" slot-scope="{ trigger }">
+    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry
+  </div>
+</infinite-loading>
+```
+
+## Via Plugin API
+
+In order to maintain consistent behavior for all load message when we building large application, this plugin support configure all slot using the plugin API, we just need to pass a string or Vue component for it, click [here](./configure-plugin-opts.md#slots) to read more about it.
+
+The `error` slot is still the special one in this way, same as the `slot` special attribute way, if you want to impletement 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:
+
+``` html
+<!-- your own error component -->
+<div>
+  Error message, click
+  <a href="javascript:;" @click="$attrs.trigger">here</a>
+  to retry
+</div>
+```
+
+If you want to keep variable clear, you also can define a function property named `trigger`, and bind it on your retry button:
+
+``` js
+// your own error component
+export default {
+  /* ... */
+  props: {
+    trigger: Function,
+  },
+  /* ... */
+};
+```

docs/zh/api/README.md

@@ -6,7 +6,9 @@ sidebar: auto
 
 ## 属性
 
-所有属性都可以通过插件 API 改写全局默认值。
+大多数属性都可以通过插件 API 改写全局默认值。
+
+- 参考：[配置插件选项 - 属性/设置](../guide/configure-plugin-opts.md#属性-设置)
 
 ### distance
 
@@ -23,7 +25,7 @@ sidebar: auto
 - 有效值：`default` | `spiral` | `circles` | `bubbles` | `waveDots`
 - 详细：
 
-此选项用于设置加载动画，你可以从内置选项中选择一个你喜欢的，你也可以通过名为 `spinner` 的[具名插槽](https://vuejs.org/v2/guide/components.html#Named-Slots)来进行自定义。
+此选项用于设置加载动画，你可以从内置选项中选择一个你喜欢的，你也可以通过名为 `spinner` 的[具名插槽](#spinner-2)来进行自定义。
 
 ### direction
 
@@ -56,6 +58,10 @@ sidebar: auto
 
 插槽的内容可以通过 `Vue.js` 官方提供的 [`slot` 特殊属性](https://vuejs.org/v2/api/index.html#slot)进行设置，也可以通过插件 API 进行全局设置。
 
+- 参考：
+  - [配置加载提示](../guide/configure-load-msg.md)
+  - [配置插件选项 - 插槽](../guide/configure-plugin-opts.md#插槽)
+
 ### no-results
 
 - 默认值：`No results :(`

docs/zh/guide/configure-load-msg.md

@@ -0,0 +1,53 @@
+# 配置加载提示
+
+此组件提供了四种不同的插槽用来显示不同的加载提示：`spinner`、`no-more`、`no-results`、`error`，你可以通过[这里](../api/#插槽)了解更多。
+
+## 通过 `slot` 特殊属性
+
+我们可以通过 [`slot` 特殊属性](https://vuejs.org/v2/api/index.html#slot)来配置它们：
+
+``` html
+<infinite-loading>
+  <div slot="spinner">Loading...</div>
+  <div slot="no-more">No more message</div>
+  <div slot="no-results">No results message</div>
+</infinite-loading>
+```
+
+与其他插槽不同的是，`error` 插槽的默认值除了会提供文字信息之外，还会提供一个重试按钮供用户重新尝试加载；在自定义 `error` 插槽时，如果你也希望提供一个重试按钮给用户，可以使用 [`slot-scope`](https://vuejs.org/v2/api/index.html#slot-scope) 功能实现，就像下面这样：
+
+``` html
+<infinite-loading>
+  <div slot="error" slot-scope="{ trigger }">
+    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry
+  </div>
+</infinite-loading>
+```
+
+## 通过插件 API
+
+在我们构建大型应用时，为了保证所有加载提示的行为一致，此插件支持通过插件 API 统一配置所有的插槽内容，我们只需要传递一个字符串或者 Vue 组件给它就可以了，点击[这里](./configure-plugin-opts.md#插槽)了解更多。
+
+在这里 `error` 插槽仍然是最特殊的哪一个，和使用 `slot` 特殊属性一样，如果你希望提供一个重试按钮给用户，你可以使用 [`vm.$attrs`](https://cn.vuejs.org/v2/api/#vm-attrs) 属性，就像这样：
+
+``` html
+<!-- your own error component -->
+<div>
+  Error message, click
+  <a href="javascript:;" @click="$attrs.trigger">here</a>
+  to retry
+</div>
+```
+
+如果你想保持变量名的整洁，你也可以定义一个叫做 `trigger` 的函数属性，并且把它绑定到重试按钮上即可：
+
+``` js
+// your own error component
+export default {
+  /* ... */
+  props: {
+    trigger: Function,
+  },
+  /* ... */
+};
+```