docs: add hide and default styles explanation for slots

Author: PeachScript

docs/assets/schema.png

@@ -15,7 +15,7 @@ npm install vue-infinite-loading -S
 
 ### Direct `<script>` Include
 
-After you imported this plugin through `script` tag, it will register `InfiniteLoading` component automatically, so you can use it in globally.
+After you imported this plugin through `script` tag, it will register `InfiniteLoading` component automatically, so you can use it in global.
 
 #### CDN
 

docs/guide/README.md

@@ -51,3 +51,56 @@ export default {
   /* ... */
 };
 ```
+
+## About Hide & Default Styles
+
+For easy to use, this component provide some default styles (`font-size`, `color` and `padding`) for slot content, if you want to keep all default styles when you configure via `slot` special attribute, you have to wrap the content with `template` tag:
+
+``` html
+<infinite-loading>
+  <!-- The no-more message will has default styles -->
+  <template slot="no-more">No more message</template>
+</infinite-loading>
+
+```
+
+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:
+
+``` html
+<infinite-loading>
+  <!-- The no-more slot will not be displayed -->
+  <span slot="no-more"></span>
+</infinite-loading>
+```
+
+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:
+
+``` html
+<infinite-loading>
+  <!-- The no-more message will has no default styles -->
+  <div slot="no-more">No more message</div>
+</infinite-loading>
+```
+
+Almost forgot, if you want to configure slot content globally via plugin API, you can control them like this:
+
+``` js
+import Vue from 'vue';
+import InfiniteLoading from 'vue-infinite-loading';
+import InfiniteError from 'path/to/your/components/InfiniteError',
+
+Vue.use(InfiniteLoading, {
+  slots: {
+    // keep default styles
+    noResults: 'No results message',
+
+    // remove default styles
+    noMore: InfiniteError,
+
+    // hide slot
+    error: {
+      render: h => h('div'),
+    },
+  },
+});
+```

docs/guide/configure-load-msg.md

@@ -51,3 +51,56 @@ export default {
   /* ... */
 };
 ```
+
+## 关于隐藏与默认样式
+
+为了便于使用，该组件为插槽内容提供了一些默认样式（`font-size`、`color` 和 `padding`），如果你希望在通过 `slot` 特殊属性配置插槽时保持默认样式的存在，你需要将插槽内容用 `template` 标签包裹：
+
+``` html
+<infinite-loading>
+  <!-- The no-more message will has default styles -->
+  <template slot="no-more">No more message</template>
+</infinite-loading>
+
+```
+
+如果你希望隐藏某个插槽，你可以创建一个不是 `template` 标签的空元素，因为 Vue.js 会忽略空的 `template` 元素：
+
+``` html
+<infinite-loading>
+  <!-- The no-more slot will not be displayed -->
+  <span slot="no-more"></span>
+</infinite-loading>
+```
+
+如果你希望移除默认样式以避免影响自己的样式，你可以将插槽内容用不是 `template` 标签的元素包裹：
+
+``` html
+<infinite-loading>
+  <!-- The no-more message will has no default styles -->
+  <div slot="no-more">No more message</div>
+</infinite-loading>
+```
+
+差点忘了，如果你想通过插件 API 全局配置插槽内容，可以像这样进行控制：
+
+``` js
+import Vue from 'vue';
+import InfiniteLoading from 'vue-infinite-loading';
+import InfiniteError from 'path/to/your/components/InfiniteError',
+
+Vue.use(InfiniteLoading, {
+  slots: {
+    // keep default styles
+    noResults: 'No results message',
+
+    // remove default styles
+    noMore: InfiniteError,
+
+    // hide slot
+    error: {
+      render: h => h('div'),
+    },
+  },
+});
+```