feat(plugin-back-to-top): support safari, close #102

vuepress · Apr 5, 2024 · 5f0b85c · 5f0b85c
1 parent d0a0f25
commit 5f0b85c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 29 deletions.
diff --git a/plugins/plugin-back-to-top/src/client/components/BackToTop.ts b/plugins/plugin-back-to-top/src/client/components/BackToTop.ts
@@ -20,7 +20,7 @@ declare const __BACK_TO_TOP_THRESHOLD__: number
 export const BackToTop = defineComponent({
   name: 'BackToTop',
 
-  setup(props) {
+  setup() {
     const pageFrontmatter = usePageFrontmatter<{ backToTop?: boolean }>()
     const locale = useLocaleConfig(__BACK_TO_TOP_LOCALES__)
     const body = shallowRef<HTMLElement>()
@@ -71,15 +71,15 @@ export const BackToTop = defineComponent({
                       h(
                         'svg',
                         h('circle', {
-                          cx: '50%',
-                          cy: '50%',
-                          style: {
-                            'stroke-dasharray': `calc(${
-                              Math.PI * progress.value
-                            }% - ${4 * Math.PI}px) calc(${Math.PI * 100}% - ${
-                              4 * Math.PI
-                            }px)`,
-                          },
+                          'cx': '26',
+                          'cy': '26',
+                          'r': '24',
+                          'fill': 'none',
+                          'stroke': 'currentColor',
+                          'stroke-width': '4',
+                          'stroke-dasharray': `${
+                            Math.PI * progress.value * 0.48
+                          } ${Math.PI * (100 - progress.value) * 0.48}`,
                         }),
                       ),
                     )

diff --git a/plugins/plugin-back-to-top/src/client/styles/back-to-top.scss b/plugins/plugin-back-to-top/src/client/styles/back-to-top.scss
@@ -4,9 +4,9 @@
   inset-inline-end: 1rem;
   z-index: 100;
 
-  width: 3rem;
-  height: 3rem;
-  padding: 0.5rem;
+  width: 48px;
+  height: 48px;
+  padding: 8px;
   border-width: 0;
   border-radius: 50%;
 
@@ -17,10 +17,9 @@
   cursor: pointer;
 
   @media (max-width: 959px) {
-    width: 2.5rem;
-    height: 2.5rem;
+    transform: scale(0.8);
+    transform-origin: 100% 100%;
   }
-
   @media print {
     display: none;
   }
@@ -49,8 +48,8 @@
   right: -2px;
   bottom: -2px;
 
-  width: calc(100% + 4px);
-  height: calc(100% + 4px);
+  width: 52px;
+  height: 52px;
 
   svg {
     width: 100%;
@@ -59,20 +58,9 @@
 
   circle {
     opacity: 0.9;
-    fill: none;
-    stroke: currentColor;
 
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
-
-    r: 22;
-
-    stroke-dasharray: 0% 314.1593%;
-    stroke-width: 3px;
-
-    @media (max-width: 959px) {
-      r: 18;
-    }
   }
 }