fix(cli/site): do not show the fold icon when the height is not high …

…enough to expand the code block
varletjs · Jan 25, 2022 · b4cd0b5 · b4cd0b5
1 parent 394f0a9
commit b4cd0b5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/packages/varlet-cli/site/components/code-example/CodeExample.vue b/packages/varlet-cli/site/components/code-example/CodeExample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
-      <var-site-button text round @click="toggle" v-if="fold">
+      <var-site-button text round @click="toggle" v-if="fold && !disabledFold">
         <var-site-icon name="xml" size="18" />
       </var-site-button>
 
@@ -53,30 +53,21 @@ export default defineComponent({
     const code: Ref<HTMLElement | null> = ref(null)
     const cid: Ref<number> = ref(clipId++)
     const fold: Ref = ref(get(config, 'pc.fold'))
+    const disabledFold: Ref<boolean> = ref(false)
     const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
-    const height: Ref<number> = ref(fold.value?.defaultFold ? fold.value?.foldHeight : -1)
+    const height: Ref<number> = ref(-1)
+
+    let fullHeight = 0
 
     const toggle = async () => {
       const foldHeight = fold.value.foldHeight
 
       if (height.value === foldHeight) {
-        height.value = -1
-        await nextTick()
-        const { offsetHeight } = code.value as HTMLElement
-
         height.value = foldHeight
         await doubleRaf()
-
-        if (offsetHeight - foldHeight < offset) {
-          Snackbar(get(config, `pc.fold.message.${getPCLocationInfo().language}`))
-          height.value = foldHeight
-        } else {
-          height.value = offsetHeight
-        }
+        height.value = fullHeight
       } else {
-        const { offsetHeight } = code.value as HTMLElement
-
-        height.value = offsetHeight
+        height.value = fullHeight
         await doubleRaf()
         height.value = foldHeight
       }
@@ -88,13 +79,19 @@ export default defineComponent({
       trigger.on('success', () => {
         Snackbar.success(clipboard.value[getPCLocationInfo().language])
       })
+
+      const { offsetHeight } = code.value as HTMLElement
+      fullHeight = offsetHeight
+      disabledFold.value = fullHeight - fold.value.foldHeight < offset
+      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : -1
     })
 
     return {
       code,
       height,
       cid,
       fold,
+      disabledFold,
       clipboard,
       toggle
     }

diff --git a/packages/varlet-cli/varlet.default.config.js b/packages/varlet-cli/varlet.default.config.js
@@ -37,10 +37,6 @@ module.exports = {
       'en-US': 'The code has been copied to the clipboard',
     },
     fold: {
-      message: {
-        'zh-CN': '已显示完整代码',
-        'en-US': 'Complete code displayed',
-      },
       defaultFold: true,
       foldHeight: 60,
     },