doc(back-top)

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

@@ -1,9 +1,9 @@
 # Change Position
+For example: right 40px & bottom 160px.
 ```html
  <n-back-top
   :right="40"
   :bottom="160"
-  :visibility-height="200"
   :style="{
     transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
   }"

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

@@ -1,32 +1,27 @@
 # BackTop
 <!--single-column-->
+It helps you back to where you were. However, time never goes back.
+## Demos
+Scroll down to see demos work.
+
 ```demo
 basic
 visibilityHeight
 changePosition
 targetContainerSelector
 ```
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
-# Long
+
+## Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|target|`function`|`null`||
+|right|`number`|`40`||
+|bottom|`number`|`40`||
+|visibility-height|`number`|`180`||
+|themed-style|`object`|`null`||
+
+## Events
+|Name|Parameters|Description|
+|-|-|-|
+|show|`()`||
+|hide|`()`||

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

@@ -3,7 +3,7 @@ You can change visibility height of backtop.
 ```html
  <n-back-top
   :bottom="100"
-  :visibility-height="600"
+  :visibility-height="300"
   :style="{
     transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
   }"
@@ -19,7 +19,7 @@ You can change visibility height of backtop.
   }"
 >
   <div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
-    Visibility Height: 600px
+    Visibility Height: 300px
   </div>
 </n-back-top>
 ```

packages/base/Portal/src/main.js

@@ -1,10 +1,16 @@
 export default {
   name: 'NBasePortal',
+  props: {
+    onMounted: {
+      type: Function,
+      default: null
+    }
+  },
   mounted () {
+    if (this.onMounted) this.onMounted()
     if (this.$el.parentElement && !this.elementTransferred) {
       this.$el.parentElement.removeChild(this.$el)
     }
-    // this.transferElement()
   },
   beforeDestroy () {
     if (document.body.contains(this.$el)) {

packages/common/BackTop/src/main.vue

@@ -1,35 +1,37 @@
 <template>
-  <transition name="n-back-top--transition">
-    <div
-      v-if="show"
-      :class="{
-        [`n-${synthesizedTheme}-theme`]: synthesizedTheme
-      }"
-      :style="{
-        ...synthesizedStyle,
-        right: styleRight,
-        bottom: styleBottom
-      }"
-      class="n-back-top"
-      @click="handleClick"
-    >
-      <slot>
-        <div class="n-back-top__default-button">
-          <svg
-            viewBox="0 0 40 40"
-          >
-            <title>BackTop</title>
-            <g>
-              <path
-                d="M30,8A20,20,0,1,0,50,28,20,20,0,0,0,30,8Zm8,23.8a1.65,1.65,0,0,1-2.36,0l-4-3.94V36.4a1.67,1.67,0,0,1-3.34,0V28l-4,3.76a1.65,1.65,0,0,1-2.36,0,1.48,1.48,0,0,1,0-2.25l7-6.67a1.65,1.65,0,0,1,2.36,0L38,29.45A1.59,1.59,0,0,1,38,31.8Zm2.36-10.61H19.67a1.6,1.6,0,1,1,0-3.19H40.33a1.6,1.6,0,1,1,0,3.19Z"
-                transform="translate(-10 -8)"
-              />
-            </g>
-          </svg>
-        </div>
-      </slot>
-    </div>
-  </transition>
+  <n-base-portal ref="portal" :on-mounted="init">
+    <transition name="n-back-top--transition">
+      <div
+        v-if="show"
+        :class="{
+          [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+        }"
+        :style="{
+          ...synthesizedStyle,
+          right: styleRight,
+          bottom: styleBottom
+        }"
+        class="n-back-top"
+        @click="handleClick"
+      >
+        <slot>
+          <div class="n-back-top__default-button">
+            <svg
+              viewBox="0 0 40 40"
+            >
+              <title>BackTop</title>
+              <g>
+                <path
+                  d="M30,8A20,20,0,1,0,50,28,20,20,0,0,0,30,8Zm8,23.8a1.65,1.65,0,0,1-2.36,0l-4-3.94V36.4a1.67,1.67,0,0,1-3.34,0V28l-4,3.76a1.65,1.65,0,0,1-2.36,0,1.48,1.48,0,0,1,0-2.25l7-6.67a1.65,1.65,0,0,1,2.36,0L38,29.45A1.59,1.59,0,0,1,38,31.8Zm2.36-10.61H19.67a1.6,1.6,0,1,1,0-3.19H40.33a1.6,1.6,0,1,1,0,3.19Z"
+                  transform="translate(-10 -8)"
+                />
+              </g>
+            </svg>
+          </div>
+        </slot>
+      </div>
+    </transition>
+  </n-base-portal>
 </template>
 
 <script>
@@ -37,9 +39,13 @@ import getScrollParent from '../../../utils/dom/getScrollParent'
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
 import asthemecontext from '../../../mixins/asthemecontext'
+import NBasePortal from '../../../base/Portal'
 
 export default {
   name: 'NBackTop',
+  components: {
+    NBasePortal
+  },
   mixins: [withapp, themeable, asthemecontext],
   props: {
     right: {
@@ -74,8 +80,14 @@ export default {
       return this.bottom + 'px'
     }
   },
+  watch: {
+    show (value) {
+      if (value) this.$emit('shohw')
+      return this.$emit('hide')
+    }
+  },
   mounted () {
-    this.init()
+    this.$refs.portal.transferElement()
   },
   beforeDestroy () {
     if (this.container) {

styles/Typography.scss

@@ -111,9 +111,6 @@ $--header-bar-width: (
     &:first-child {
       margin-top: 0;
     }
-    &:last-child {
-      margin-bottom: 0;
-    }
     transition: color .3s $--n-ease-in-out-cubic-bezier;
     margin: 8px 0 8px 0;
     font-size: 14px;