github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-06-06 15:40:15 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/assets/runtime-api_core_utils.md.WYx95Kix.js
github-actions[bot] aaff67434b Deploy to GitHub pages
2026-06-04 09:22:54 +00:00

14 lines
11 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{ax as i,z as a,A as l,b5 as t}from"./chunks/framework.V2ssSR2R.js";const d=JSON.parse('{"title":"工具函数","description":"","frontmatter":{},"headers":[],"relativePath":"runtime-api/core/utils.md","filePath":"runtime-api/core/utils.md"}'),n={name:"runtime-api/core/utils.md"};function e(h,s,p,r,k,o){return l(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="工具函数" tabindex="-1">工具函数 <a class="header-anchor" href="#工具函数" aria-label="Permalink to “工具函数”">​</a></h1><p><code>@tmagic/core</code> 导出的工具函数。</p><h2 id="style2obj" tabindex="-1">style2Obj <a class="header-anchor" href="#style2obj" aria-label="Permalink to “style2Obj”">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{string} style</code> CSS 样式字符串</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{object}</code> 样式对象</li></ul></li><li><p><strong>详情：</strong></p><p>将 CSS 样式字符串转换为对象格式。若入参不是字符串，则原样返回。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { style2Obj } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> styleObj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style2Obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;width: 100px; height: 200px;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(styleObj); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// { width: &#39;100px&#39;, height: &#39;200px&#39; }</span></span></code></pre></div><h2 id="fillbackgroundimage" tabindex="-1">fillBackgroundImage <a class="header-anchor" href="#fillbackgroundimage" aria-label="Permalink to “fillBackgroundImage”">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{string} value</code> 背景图片 URL</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{string}</code> 完整的 CSS 背景图片值</li></ul></li><li><p><strong>详情：</strong></p><p>填充背景图片 URL 为完整的 CSS 格式。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { fillBackgroundImage } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fillBackgroundImage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://example.com/image.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(bg); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// &#39;url(https://example.com/image.png)&#39;</span></span></code></pre></div><h2 id="gettransform" tabindex="-1">getTransform <a class="header-anchor" href="#gettransform" aria-label="Permalink to “getTransform”">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{Record&lt;string, string&gt; | string} value</code> transform 配置（对象或 CSS 字符串）</li><li><code>{JsEngine} jsEngine</code> JS 引擎类型</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{string | Record&lt;string, string&gt;[]}</code> CSS transform 字符串；当 <code>jsEngine === &#39;hippy&#39;</code> 时返回数组格式</li></ul></li><li><p><strong>详情：</strong></p><p>根据配置生成 CSS transform。当 <code>jsEngine === &#39;hippy&#39;</code> 时，会将 <code>&quot;rotate(90deg) scale(1.5)&quot;</code> 这样的字符串解析成 <code>[{ rotate: &#39;90deg&#39; }, { scale: &#39;1.5&#39; }]</code> 形式以适配 Hippy；其它情况下返回标准 CSS transform 字符串。</p></li></ul><h2 id="transformstyle" tabindex="-1">transformStyle <a class="header-anchor" href="#transformstyle" aria-label="Permalink to “transformStyle”">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{Record&lt;string, any&gt; | string} style</code> 样式对象或 CSS 字符串</li><li><code>{JsEngine} jsEngine</code> JS 引擎类型</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{object}</code> 转换后的样式对象</li></ul></li><li><p><strong>详情：</strong></p><p>转换样式对象，将数值转换为 rem 单位（移动端适配）。当 <code>style</code> 为字符串时，会先用 <code>style2Obj</code> 解析为对象再处理。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { transformStyle } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> transformStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;browser&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(style); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// { width: &#39;1rem&#39;, height: &#39;2rem&#39; }</span></span></code></pre></div><h2 id="常量" tabindex="-1">常量 <a class="header-anchor" href="#常量" aria-label="Permalink to “常量”">​</a></h2><h3 id="common-event-prefix" tabindex="-1">COMMON_EVENT_PREFIX <a class="header-anchor" href="#common-event-prefix" aria-label="Permalink to “COMMON_EVENT_PREFIX”">​</a></h3><ul><li><p><strong>值：</strong> <code>&#39;magic:common:events:&#39;</code></p></li><li><p><strong>详情：</strong></p><p>通用事件前缀。</p></li></ul><h3 id="common-method-prefix" tabindex="-1">COMMON_METHOD_PREFIX <a class="header-anchor" href="#common-method-prefix" aria-label="Permalink to “COMMON_METHOD_PREFIX”">​</a></h3><ul><li><p><strong>值：</strong> <code>&#39;magic:common:actions:&#39;</code></p></li><li><p><strong>详情：</strong></p><p>通用方法前缀。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { COMMON_EVENT_PREFIX, COMMON_METHOD_PREFIX } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> eventKey</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`\${</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">COMMON_EVENT_PREFIX</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}click\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> methodKey</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`\${</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">COMMON_METHOD_PREFIX</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}show\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div>`,19)])])}const c=i(n,[["render",e]]);export{d as __pageData,c as default};
Reference in New Issue View Git Blame Copy Permalink