doc(back-top): zh-cn

demo/documentation/components/backTop/enUS/index.md

@@ -1,4 +1,4 @@
-# BackTop
+# Back Top
 <!--single-column-->
 It helps you back to where you were. However, time never goes back.
 ## Demos

demo/documentation/components/backTop/enUS/targetContainerSelector.md

@@ -1,4 +1,4 @@
-# Target
+# Target to be Listened to
 You can specify target to listen scroll event of.
 ```html
 <n-back-top

demo/documentation/components/backTop/zhCN/basic.md

@@ -0,0 +1,5 @@
+# 基本用法
+Back Top 会找到首个可滚动的祖先元素并且监听它的滚动事件。
+```html
+<n-back-top />
+```

demo/documentation/components/backTop/zhCN/changePosition.md

@@ -0,0 +1,25 @@
+# 改变位置
+例如：right 40px & bottom 160px。
+```html
+ <n-back-top
+  :right="40"
+  :bottom="160"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
+>
+  <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    改变位置
+  </div>
+</n-back-top>
+```

demo/documentation/components/backTop/zhCN/index.md

@@ -0,0 +1,27 @@
+# 回到顶部 Back Top
+<!--single-column-->
+它可以帮你回到你曾经到过的地方。不过时间是回不去了。
+## 演示
+向下滚动页面查看效果。
+
+```demo
+basic
+visibilityHeight
+changePosition
+targetContainerSelector
+```
+
+## Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|target|`() => HTMLElement`|一个返回最邻近可滚动父级元素的函数||
+|right|`number`|`40`||
+|bottom|`number`|`40`||
+|visibility-height|`number`|`180`||
+|themed-style|`object`|`null`||
+
+## Events
+|名称|参数|介绍|
+|-|-|-|
+|show|`()`||
+|hide|`()`||

demo/documentation/components/backTop/zhCN/targetContainerSelector.md

@@ -0,0 +1,44 @@
+# 监听目标
+你可以设定监听哪个元素来触发 Back Top。
+```html
+<n-back-top
+  :target="target"
+  :bottom="220"
+  :visibility-height="10"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
+>
+   <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    指定目标
+  </div>
+</n-back-top>
+<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+  A funny joke is need to be wrote here.<br/>
+</div>
+```
+```js
+export default {
+  data () {
+    return {
+      target: () => this.$refs.scrollContainer
+    }
+  }
+}
+```

demo/documentation/components/backTop/zhCN/visibilityHeight.md

@@ -0,0 +1,25 @@
+# 可视高度
+可以改变 Back Top 的可视高度。
+```html
+ <n-back-top
+  :bottom="100"
+  :visibility-height="300"
+  :style="{
+    transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
+  }"
+  :themed-style="{
+    light: {
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgba(0, 0, 0, .3)'
+    },
+    dark: {
+      color: 'rgb(255, 255, 255)',
+      backgroundColor: 'rgba(255, 255, 255, .3)'
+    }
+  }"
+>
+  <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
+    可视高度：300px
+  </div>
+</n-back-top>
+```