fix(back-top): add window as default value of target

varletjs · May 19, 2021 · f293a94 · f293a94
1 parent 80f2ad8
commit f293a94
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 18 deletions.
diff --git a/packages/varlet-ui/src/back-top/BackTop.vue b/packages/varlet-ui/src/back-top/BackTop.vue
@@ -23,7 +23,7 @@ export default defineComponent({
   },
   props,
   setup(props) {
-    const element: Ref<Element | null> = ref(null)
+    const element: Ref<Element | Window> = ref(window)
     const show: Ref<boolean> = ref(false)
 
     const click = () => {
@@ -57,13 +57,11 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      element.value = getElement()
-      if (!element.value) return
+      if (props.target) element.value = getElement()
       element.value.addEventListener('scroll', throttleScroll)
     })
 
     onBeforeUnmount(() => {
-      if (!element.value) return
       element.value.removeEventListener('scroll', throttleScroll)
     })
 

diff --git a/packages/varlet-ui/src/back-top/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/back-top/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test backTop example 1`] = `
-"<div class=\\"var-back-top__example\\">
+"<div>
   <div class=\\"var-cell\\">
     <!--v-if-->
     <div class=\\"var-cell__content\\">

diff --git a/packages/varlet-ui/src/back-top/__tests__/index.spec.js b/packages/varlet-ui/src/back-top/__tests__/index.spec.js
@@ -57,5 +57,6 @@ test('test backTop props', async () => {
 
   expect(clickHandle).toHaveBeenCalledTimes(1)
 
+
   wrapper.unmount()
 })
diff --git a/packages/varlet-ui/src/back-top/docs/en-US.md b/packages/varlet-ui/src/back-top/docs/en-US.md
@@ -16,9 +16,9 @@ createApp().use(BackTop)
 ### Basic Usage
 
 ```html
-<div class="var-back-top__example">
+<div>
   <var-cell v-for="list in lists" :key="list">Scroll to bottom {{ list }}</var-cell>
-  <var-back-top target=".var-back-top__example" :duration="300" />
+  <var-back-top :duration="300" />
 </div>
 ```
 ```javascript

diff --git a/packages/varlet-ui/src/back-top/docs/zh-CN.md b/packages/varlet-ui/src/back-top/docs/zh-CN.md
@@ -16,9 +16,9 @@ createApp().use(BackTop)
 ### 基本使用
 
 ```html
-<div class="var-back-top__example">
+<div>
   <var-cell v-for="list in lists" :key="list">Scroll to bottom {{ list }}</var-cell>
-  <var-back-top target=".var-back-top__example" :duration="300" />
+  <var-back-top :duration="300" />
 </div>
 ```
 ```javascript

diff --git a/packages/varlet-ui/src/back-top/example/index.vue b/packages/varlet-ui/src/back-top/example/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="var-back-top__example">
+  <div>
     <var-cell v-for="list in lists" :key="list">Scroll to bottom {{ list }}</var-cell>
-    <var-back-top target=".var-back-top__example" :duration="300" />
+    <var-back-top :duration="300" />
   </div>
 </template>
 
@@ -24,10 +24,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.var-back-top__example {
-  height: calc(100vh - 40px);
-  overflow: auto;
-}
-</style>