tmagic-editor/docs/assets/runtime-api_core_utils.md.D61lvGXB.js

import{ax as i,z as a,A as t,b2 as l}from"./chunks/framework.DkLJC2NO.js";const g=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(p,s,h,r,k,o){return t(),a("div",null,[...s[0]||(s[0]=[l(`<h1 id="工具函数" tabindex="-1">工具函数 <a class="header-anchor" href="#工具函数" aria-label="Permalink to &quot;工具函数&quot;">​</a></h1><p><code>@tmagic/core</code> 导出的工具函数。</p><h2 id="style2obj" tabindex="-1">style2Obj <a class="header-anchor" href="#style2obj" aria-label="Permalink to &quot;style2Obj&quot;">​</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;fillBackgroundImage&quot;">​</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;getTransform&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{object} value</code> transform 配置</li><li><code>{JsEngine} jsEngine</code> JS 引擎类型</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{string}</code> CSS transform 字符串</li></ul></li><li><p><strong>详情：</strong></p><p>根据配置生成 CSS transform 字符串，会根据 JS 引擎类型进行适配。</p></li></ul><h2 id="transformstyle" tabindex="-1">transformStyle <a class="header-anchor" href="#transformstyle" aria-label="Permalink to &quot;transformStyle&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{object} style</code> 样式对象</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 单位（移动端适配）。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;常量&quot;">​</a></h2><h3 id="common-event-prefix" tabindex="-1">COMMON_EVENT_PREFIX <a class="header-anchor" href="#common-event-prefix" aria-label="Permalink to &quot;COMMON_EVENT_PREFIX&quot;">​</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 &quot;COMMON_METHOD_PREFIX&quot;">​</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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{g as __pageData,c as default};