docs: deprecated slot special attributes, use v-slot directives (PeachScript#238)

ycs77 · PeachScript · commit d8fd6c40aef5 · 2019-05-24T11:10:41.000+08:00
* chore: update vue version
* docs: deprecated slot special attributes, prefer v-slot directives
diff --git a/docs/api/README.md b/docs/api/README.md
@@ -58,7 +58,11 @@ The component will be reset if this property has changed, just like recreating a
 
 ## Slots
 
-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.
+::: warning
+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).
+:::
+
+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.
 
 - See also:
   - [Configure Load Messages](../guide/configure-load-msg.md)
diff --git a/docs/guide/configure-load-msg.md b/docs/guide/configure-load-msg.md
@@ -16,24 +16,28 @@ Only the `spinner` slot can be configured via the prop, and the set value can on
 
 You can preview all built-in spinner types on the right. Please use other ways if you want to create your own spinner.
 
-## Via `slot` Sepcial Attribute
+## Via `v-slot` Directive
 
-We can use the [`slot` special attribute](https://vuejs.org/v2/api/index.html#slot) to configure them:
+::: warning
+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).
+:::
+
+We can use the [`v-slot` directive] (https:// Vuejs.org/v2/api/#v-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>
+  <div v-slot:spinner>Loading...</div>
+  <div v-slot:no-more>No more message</div>
+  <div v-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 the data again. If you want to implement 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:
+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:
 
 ``` html
 <infinite-loading>
-  <div slot="error" slot-scope="{ trigger }">
-    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry
+  <div v-slot:error="{ trigger }">
+    Error message, click <a href="#retry" @click.prevent="trigger">here</a> to retry
   </div>
 </infinite-loading>
 ```
@@ -42,13 +46,13 @@ Unlike other slots, the default value for the `error` slot will provide a retry
 
 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.
 
-The `error` slot is still special in this way. Just as with the `slot` special attribute, 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:
+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:
 
 ``` html
 <!-- your own error component -->
 <div>
   Error message, click
-  <a href="javascript:;" @click="$attrs.trigger">here</a>
+  <a href="#retry" @click.prevent="$attrs.trigger">here</a>
   to retry
 </div>
 ```
@@ -68,12 +72,12 @@ export default {
 
 ## About Hide & Default Styles
 
-For easy use, this component provides some default styles (`font-size`, `color` and `padding`) for slot content. If you want to keep all default styles when you configure via the `slot` special attribute, you have to wrap the content with a `template` tag:
+For easy use, this component provides some default styles (`font-size`, `color` and `padding`) for slot content. If you want to keep all default styles when you configure via the `v-slot` directive, you have to wrap the content with a `template` tag:
 
 ``` html
 <infinite-loading>
   <!-- The no-more message will has default styles -->
-  <template slot="no-more">No more message</template>
+  <template v-slot:no-more>No more message</template>
 </infinite-loading>
 
 ```
@@ -83,7 +87,7 @@ If you want to hide a slot, you can create an empty element that is not a `templ
 ``` html
 <infinite-loading>
   <!-- The no-more slot will not be displayed -->
-  <span slot="no-more"></span>
+  <span v-slot:no-more></span>
 </infinite-loading>
 ```
 
@@ -92,7 +96,7 @@ If you want to remove all default styles to avoid affecting your own styles, you
 ``` html
 <infinite-loading>
   <!-- The no-more message will has no default styles -->
-  <div slot="no-more">No more message</div>
+  <div v-slot:no-more>No more message</div>
 </infinite-loading>
 ```
 
diff --git a/docs/guide/use-with-el-table.md b/docs/guide/use-with-el-table.md
@@ -23,7 +23,7 @@ The final template should be similar to:
     <!-- el-table-column items -->
 
     <infinite-loading
-      slot="append"
+      v-slot:append
       @infinite="infiniteHandler"
       force-use-infinite-wrapper=".el-table__body-wrapper">
     </infinite-loading>
diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md
@@ -58,7 +58,11 @@ sidebar: auto
 
 ## 插槽
 
-插槽的内容可以通过 `Vue.js` 官方提供的 [`slot` 特殊属性](https://vuejs.org/v2/api/index.html#slot)进行设置，也可以通过插件 API 进行全局设置。
+::: warning
+Vue.js 官方于 v2.6.0 后[废弃 slot 特殊特性](https://cn.vuejs.org/v2/api/#slot-废弃)，推荐使用[v-slot 指令](https://cn.vuejs.org/v2/api/#v-slot)。
+:::
+
+插槽的内容可以通过 `Vue.js` 官方提供的[`v-slot` 指令](https://cn.vuejs.org/v2/api/#v-slot)进行设置，也可以通过插件 API 进行全局设置。
 
 - 参考：
   - [配置加载提示](../guide/configure-load-msg.md)
diff --git a/docs/zh/guide/configure-load-msg.md b/docs/zh/guide/configure-load-msg.md
@@ -16,24 +16,28 @@ previewLink: //jsfiddle.net/PeachScript/94kL0bvs/embedded/result/
 
 你可以在右边预览所有内置加载动画，如果你希望创建自己的加载动画，请使用其他方式。
 
-## 通过 `slot` 特殊属性
+## 通过 `v-slot` 指令
 
-我们可以通过 [`slot` 特殊属性](https://vuejs.org/v2/api/index.html#slot)来配置它们：
+::: warning
+Vue.js 官方于 v2.6.0 后[废弃 slot 特殊特性](https://cn.vuejs.org/v2/api/#slot-废弃)，推荐使用[v-slot 指令](https://cn.vuejs.org/v2/api/#v-slot)。
+:::
+
+我们可以通过[`v-slot` 指令](https://cn.vuejs.org/v2/api/#v-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>
+  <div v-slot:spinner>Loading...</div>
+  <div v-slot:no-more>No more message</div>
+  <div v-slot:no-results>No results message</div>
 </infinite-loading>
 ```
 
-与其他插槽不同的是，`error` 插槽的默认值除了会提供文字信息之外，还会提供一个重试按钮供用户重新尝试加载；在自定义 `error` 插槽时，如果你也希望提供一个重试按钮给用户，可以使用 [`slot-scope`](https://vuejs.org/v2/api/index.html#slot-scope) 功能实现，就像下面这样：
+与其他插槽不同的是，`error` 插槽的默认值除了会提供文字信息之外，还会提供一个重试按钮供用户重新尝试加载；在自定义 `error` 插槽时，如果你也希望提供一个重试按钮给用户，可以接收 prop 中的重試的方法 `trigger` 並注入到按鈕，就像下面这样：
 
 ``` html
 <infinite-loading>
-  <div slot="error" slot-scope="{ trigger }">
-    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry
+  <div v-slot:error="{ trigger }">
+    Error message, click <a href="#retry" @click.prevent="trigger">here</a> to retry
   </div>
 </infinite-loading>
 ```
@@ -42,13 +46,13 @@ previewLink: //jsfiddle.net/PeachScript/94kL0bvs/embedded/result/
 
 在我们构建大型应用时，为了保证所有加载提示的行为一致，此插件支持通过插件 API 统一配置所有的插槽内容，我们只需要传递一个字符串或者 Vue 组件给它就可以了，点击[这里](./configure-plugin-opts.md#插槽)了解更多。
 
-在这里 `error` 插槽仍然是最特殊的哪一个，和使用 `slot` 特殊属性一样，如果你希望提供一个重试按钮给用户，你可以使用 [`vm.$attrs`](https://cn.vuejs.org/v2/api/#vm-attrs) 属性，就像这样：
+在这里 `error` 插槽仍然是最特殊的哪一个，和使用 `v-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>
+  <a href="#retry" @click.prevent="$attrs.trigger">here</a>
   to retry
 </div>
 ```
@@ -68,12 +72,12 @@ export default {
 
 ## 关于隐藏与默认样式
 
-为了便于使用，该组件为插槽内容提供了一些默认样式（`font-size`、`color` 和 `padding`），如果你希望在通过 `slot` 特殊属性配置插槽时保持默认样式的存在，你需要将插槽内容用 `template` 标签包裹：
+为了便于使用，该组件为插槽内容提供了一些默认样式（`font-size`、`color` 和 `padding`），如果你希望在通过 `v-slot` 指令配置插槽时保持默认样式的存在，你需要将插槽内容用 `template` 标签包裹：
 
 ``` html
 <infinite-loading>
   <!-- The no-more message will has default styles -->
-  <template slot="no-more">No more message</template>
+  <template v-slot:no-more>No more message</template>
 </infinite-loading>
 
 ```
@@ -83,7 +87,7 @@ export default {
 ``` html
 <infinite-loading>
   <!-- The no-more slot will not be displayed -->
-  <span slot="no-more"></span>
+  <span v-slot:no-more></span>
 </infinite-loading>
 ```
 
@@ -92,7 +96,7 @@ export default {
 ``` html
 <infinite-loading>
   <!-- The no-more message will has no default styles -->
-  <div slot="no-more">No more message</div>
+  <div v-slot:no-more>No more message</div>
 </infinite-loading>
 ```
 
diff --git a/docs/zh/guide/use-with-el-table.md b/docs/zh/guide/use-with-el-table.md
@@ -23,7 +23,7 @@ previewLink: //jsfiddle.net/PeachScript/uyjb6z34/embedded/result/
     <!-- el-table-column items -->
 
     <infinite-loading
-      slot="append"
+      v-slot:append
       @infinite="infiniteHandler"
       force-use-infinite-wrapper=".el-table__body-wrapper">
     </infinite-loading>
diff --git a/package.json b/package.json
@@ -77,16 +77,16 @@
     "postcss-loader": "^3.0.0",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.13.0",
-    "vue": "^2.5.17",
-    "vue-loader": "^15.4.1",
-    "vue-template-compiler": "^2.5.17",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.10",
     "vuepress": "^1.0.0-alpha.23",
     "webpack": "^4.17.2",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8"
   },
   "peerDependencies": {
-    "vue": "^2.2.0"
+    "vue": "^2.6.10"
   },
   "license": "MIT",
   "browserslist": [
