fix(back-top): fix n-back-top has log warnings of console when use sh…

…ow prop (#3128) Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Jun 18, 2022 · 08ddb72 · 08ddb72
1 parent 819fabc
commit 08ddb72
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - Fix `n-input-group-label`'s content is abnormal in `n-drawer-content`, closes [#3115](https://github.com/TuSimple/naive-ui/issues/3115).
+- Fix `n-back-top` has log warnings of console when use `show` prop, closes [#3122](https://github.com/TuSimple/naive-ui/issues/3122).
 - `volar.d.ts` remove `[key: string]: any` to solve the code prompt problem in `vscode`.
 
 ### Feats

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - 修复 `n-input-group-label` 的内容在 `n-drawer-content` 嵌套中异常, 关闭 [#3115](https://github.com/TuSimple/naive-ui/issues/3115)
+- 修复 `n-back-top` 在使用 `show` 时控制台报警告, 关闭 [#3122](https://github.com/TuSimple/naive-ui/issues/3122)
 - `volar.d.ts` 去除 `[key: string]: any` ,解决 `vscode` 中代码提示问题
 
 ### Feats

diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx
@@ -100,14 +100,16 @@ export default defineComponent({
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
 
     const scrollTopRef = ref<number | null>(null)
-    const uncontrolledShowRef = computed(() => {
-      if (scrollTopRef.value === null) return false
-      return scrollTopRef.value >= props.visibilityHeight
+    const uncontrolledShowRef = ref(false)
+    watchEffect(() => {
+      if (scrollTopRef.value === null) uncontrolledShowRef.value = false
+      uncontrolledShowRef.value =
+        (scrollTopRef.value as number) >= props.visibilityHeight
     })
     const DomInfoReadyRef = ref(false)
     watch(uncontrolledShowRef, (value) => {
       if (DomInfoReadyRef.value) {
-        props['onUpdate:show'](value)
+        props['onUpdate:show']?.(value)
       }
     })
     const controlledShowRef = toRef(props, 'show')