feat: autofit.js update

Auto-Plugin · Nov 1, 2024 · 2709be0 · 2709be0
1 parent e0df9df
commit 2709be0
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 11 deletions.
diff --git a/autofit.js/404.html b/autofit.js/404.html
@@ -16,7 +16,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"C3bgOZul\",\"close.md\":\"CWwbuvOO\",\"index.md\":\"CNdXQuPF\",\"question.md\":\"CCyKSwR2\",\"theory.md\":\"BdF489nA\",\"use.md\":\"lOfGXIS5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"autofit.js\",\"description\":\"迄今为止最易用的自适应工具\",\"base\":\"/autoLarryPages/autofit.js/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./logo.png\",\"nav\":[{\"text\":\"概览\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/use\"}],\"sidebar\":[{\"items\":[{\"text\":\"即刻使用\",\"link\":\"/use\"},{\"text\":\"使用进阶参数\",\"link\":\"/api\"},{\"text\":\"关闭 autofit.js\",\"link\":\"/close\"},{\"text\":\"了解 autofit.js 原理\",\"link\":\"/theory\"},{\"text\":\"还有问题？\",\"link\":\"/question\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/LarryZhu-dev/autofit.js\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"CPPvDXoo\",\"close.md\":\"CWwbuvOO\",\"index.md\":\"CNdXQuPF\",\"question.md\":\"CCyKSwR2\",\"theory.md\":\"BdF489nA\",\"use.md\":\"lOfGXIS5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"autofit.js\",\"description\":\"迄今为止最易用的自适应工具\",\"base\":\"/autoLarryPages/autofit.js/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./logo.png\",\"nav\":[{\"text\":\"概览\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/use\"}],\"sidebar\":[{\"items\":[{\"text\":\"即刻使用\",\"link\":\"/use\"},{\"text\":\"使用进阶参数\",\"link\":\"/api\"},{\"text\":\"关闭 autofit.js\",\"link\":\"/close\"},{\"text\":\"了解 autofit.js 原理\",\"link\":\"/theory\"},{\"text\":\"还有问题？\",\"link\":\"/question\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/LarryZhu-dev/autofit.js\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
 
   </body>
 </html>
diff --git a/autofit.js/api.html b/autofit.js/api.html
@@ -12,7 +12,7 @@
     <link rel="preload" href="/autoLarryPages/autofit.js/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
     <link rel="modulepreload" href="/autoLarryPages/autofit.js/assets/chunks/theme.CcQzWV0D.js">
     <link rel="modulepreload" href="/autoLarryPages/autofit.js/assets/chunks/framework.DRtPrxkp.js">
-    <link rel="modulepreload" href="/autoLarryPages/autofit.js/assets/api.md.C3bgOZul.lean.js">
+    <link rel="modulepreload" href="/autoLarryPages/autofit.js/assets/api.md.CPPvDXoo.lean.js">
     <link rel="icon" href="./logo.png">
     <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
     <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
@@ -24,7 +24,7 @@
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  dw: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1920</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  el: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;body&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  resize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="canvas-事件热区偏移" tabindex="-1">canvas 事件热区偏移 <a class="header-anchor" href="#canvas-事件热区偏移" aria-label="Permalink to &quot;canvas 事件热区偏移&quot;"></a></h2><ol><li><p><strong>使用 <code>ignore</code> 参数</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">autofit.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="canvas-事件热区偏移、element等弹出层位置偏移问题" tabindex="-1">canvas 事件热区偏移、element等弹出层位置偏移问题 <a class="header-anchor" href="#canvas-事件热区偏移、element等弹出层位置偏移问题" aria-label="Permalink to &quot;canvas 事件热区偏移、element等弹出层位置偏移问题&quot;"></a></h2><h3 id="canvas-热区偏移" tabindex="-1">canvas 热区偏移 <a class="header-anchor" href="#canvas-热区偏移" aria-label="Permalink to &quot;canvas 热区偏移&quot;"></a></h3><ol><li><p><strong>使用 <code>ignore</code> 参数</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">autofit.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ignore: [</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      el: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.gaodeMap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//必填</span></span>
@@ -43,8 +43,12 @@
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;G2plot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;G2plot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onMounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  elRectification</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.G2plot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">🔴</p><p>使用 elRectification 时，需要被矫正的元素已经挂载</p></div></li></ol></div></div></main><footer class="VPDocFooter" data-v-93b32803 data-v-7fca0272><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7fca0272><span class="visually-hidden" id="doc-footer-aria-label" data-v-7fca0272>Pager</span><div class="pager" data-v-7fca0272><a class="VPLink link pager-link prev" href="/autoLarryPages/autofit.js/use.html" data-v-7fca0272><!--[--><span class="desc" data-v-7fca0272>Previous page</span><span class="title" data-v-7fca0272>即刻使用</span><!--]--></a></div><div class="pager" data-v-7fca0272><a class="VPLink link pager-link next" href="/autoLarryPages/autofit.js/close.html" data-v-7fca0272><!--[--><span class="desc" data-v-7fca0272>Next page</span><span class="title" data-v-7fca0272>关闭 autofit.js</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"C3bgOZul\",\"close.md\":\"CWwbuvOO\",\"index.md\":\"CNdXQuPF\",\"question.md\":\"CCyKSwR2\",\"theory.md\":\"BdF489nA\",\"use.md\":\"lOfGXIS5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"autofit.js\",\"description\":\"迄今为止最易用的自适应工具\",\"base\":\"/autoLarryPages/autofit.js/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./logo.png\",\"nav\":[{\"text\":\"概览\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/use\"}],\"sidebar\":[{\"items\":[{\"text\":\"即刻使用\",\"link\":\"/use\"},{\"text\":\"使用进阶参数\",\"link\":\"/api\"},{\"text\":\"关闭 autofit.js\",\"link\":\"/close\"},{\"text\":\"了解 autofit.js 原理\",\"link\":\"/theory\"},{\"text\":\"还有问题？\",\"link\":\"/question\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/LarryZhu-dev/autofit.js\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">🔴</p><p>使用 elRectification 时，需要被矫正的元素已经挂载</p></div></li></ol><h3 id="element等弹出层偏移" tabindex="-1">element等弹出层偏移 <a class="header-anchor" href="#element等弹出层偏移" aria-label="Permalink to &quot;element等弹出层偏移&quot;"></a></h3><p>感谢 <a href="https://github.com/hellorayza" target="_blank" rel="noreferrer">@hellorayza</a> <a href="https://github.com/LarryZhu-dev/autofit.js/pull/74" target="_blank" rel="noreferrer">PR#74</a></p><p>使用 <strong>子串匹配属性</strong> 选择器 div[id*=&quot;el-popper-container&quot;] 可以解决 element 弹出层偏移问题，其他组件库也是类似用法，例：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">autofit.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ignore:[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div[id*=&quot;el-popper-container&quot;]&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>elRectification 同样也可以解决弹出层偏移问题，只需</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onMounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  elRectification</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div[id*=&quot;el-popper-container&quot;]&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-93b32803 data-v-7fca0272><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7fca0272><span class="visually-hidden" id="doc-footer-aria-label" data-v-7fca0272>Pager</span><div class="pager" data-v-7fca0272><a class="VPLink link pager-link prev" href="/autoLarryPages/autofit.js/use.html" data-v-7fca0272><!--[--><span class="desc" data-v-7fca0272>Previous page</span><span class="title" data-v-7fca0272>即刻使用</span><!--]--></a></div><div class="pager" data-v-7fca0272><a class="VPLink link pager-link next" href="/autoLarryPages/autofit.js/close.html" data-v-7fca0272><!--[--><span class="desc" data-v-7fca0272>Next page</span><span class="title" data-v-7fca0272>关闭 autofit.js</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"CPPvDXoo\",\"close.md\":\"CWwbuvOO\",\"index.md\":\"CNdXQuPF\",\"question.md\":\"CCyKSwR2\",\"theory.md\":\"BdF489nA\",\"use.md\":\"lOfGXIS5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"autofit.js\",\"description\":\"迄今为止最易用的自适应工具\",\"base\":\"/autoLarryPages/autofit.js/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./logo.png\",\"nav\":[{\"text\":\"概览\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/use\"}],\"sidebar\":[{\"items\":[{\"text\":\"即刻使用\",\"link\":\"/use\"},{\"text\":\"使用进阶参数\",\"link\":\"/api\"},{\"text\":\"关闭 autofit.js\",\"link\":\"/close\"},{\"text\":\"了解 autofit.js 原理\",\"link\":\"/theory\"},{\"text\":\"还有问题？\",\"link\":\"/question\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/LarryZhu-dev/autofit.js\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
 
   </body>
 </html>