mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
66 lines
33 KiB
JavaScript
66 lines
33 KiB
JavaScript
import{_ as s,c as i,o as a,aR as e}from"./chunks/framework.C7RrxATG.js";const E=JSON.parse('{"title":"Common Problems FAQ","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/common-problems.md","filePath":"en-US/guide/common-problems.md","lastUpdated":1762249100000}'),t={name:"en-US/guide/common-problems.md"},n=e(`<h1 id="common-problems-faq" tabindex="-1">Common Problems FAQ <a class="header-anchor" href="#common-problems-faq" aria-label="Permalink to "Common Problems FAQ""></a></h1><p>This section introduces some <strong>common problems</strong> encountered during development and their <strong>solutions</strong></p><h2 id="which-platforms-are-currently-supported" tabindex="-1">Which platforms are currently supported? <a class="header-anchor" href="#which-platforms-are-currently-supported" aria-label="Permalink to "Which platforms are currently supported?""></a></h2><p>Currently supports WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, and other platforms.</p><h2 id="are-there-any-best-practice-sharing" tabindex="-1">Are there any best practice sharing? <a class="header-anchor" href="#are-there-any-best-practice-sharing" aria-label="Permalink to "Are there any best practice sharing?""></a></h2><p>Yes, you can follow my WeChat public account "不如摸鱼去", or visit my blog <a href="https://blog.wot-ui.cn/" target="_blank" rel="noreferrer">不如摸鱼去</a>, sharing countless dry goods, waiting for you to see.</p><h2 id="does-the-component-library-provide-components-that-can-be-imported-individually" tabindex="-1">Does the component library provide components that can be imported individually? <a class="header-anchor" href="#does-the-component-library-provide-components-that-can-be-imported-individually" aria-label="Permalink to "Does the component library provide components that can be imported individually?""></a></h2><p>Currently, no. First, the plugin market lacks CI/CD tools, making automated publishing impossible. Maintaining a set of individually importable components is time and effort-consuming. Secondly, the installation methods provided by the component library can already achieve on-demand importing, so there's no need to provide individually importable components.</p><h2 id="how-to-enable-dark-mode" tabindex="-1">How to enable dark mode? <a class="header-anchor" href="#how-to-enable-dark-mode" aria-label="Permalink to "How to enable dark mode?""></a></h2><p><code>Wot UI</code> supports dark mode, theme customization, and other capabilities. See the <a href="/en-US/component/config-provider.html">ConfigProvider</a> component for details.</p><h2 id="is-there-a-technical-communication-group" tabindex="-1">Is there a technical communication group? <a class="header-anchor" href="#is-there-a-technical-communication-group" aria-label="Permalink to "Is there a technical communication group?""></a></h2><p>Yes! You can join the <a href="/en-US/guide/join-group.html">Wot UI Help Group</a> to share experiences and exchange ideas.</p><h2 id="sass-throws-lots-of-errors-and-warnings" tabindex="-1">Sass throws lots of errors and warnings? <a class="header-anchor" href="#sass-throws-lots-of-errors-and-warnings" aria-label="Permalink to "Sass throws lots of errors and warnings?""></a></h2><p><code>Dart Sass 3.0.0</code> has deprecated a batch of APIs, and the component library hasn't been compatible yet, so please ensure your <code>sass</code> version is 1.78.0 or earlier. You can install a specific version using the following command:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Upt8l" id="tab-C0gDBNu" checked><label data-title="npm" for="tab-C0gDBNu">npm</label><input type="radio" name="group-Upt8l" id="tab-OIJ6xxJ"><label data-title="yarn" for="tab-OIJ6xxJ">yarn</label><input type="radio" name="group-Upt8l" id="tab-WLxTRS_"><label data-title="pnpm" for="tab-WLxTRS_">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sass@1.78.0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sass@1.78.0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sass@1.78.0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div></div></div><h2 id="mini-program-style-isolation" tabindex="-1">Mini Program Style Isolation <a class="header-anchor" href="#mini-program-style-isolation" aria-label="Permalink to "Mini Program Style Isolation""></a></h2><h3 id="when-using-wot-ui-components-in-pages-you-can-directly-override-styles-in-the-page-s-style-file" tabindex="-1">When using Wot UI components in pages, you can directly override styles in the page's style file <a class="header-anchor" href="#when-using-wot-ui-components-in-pages-you-can-directly-override-styles-in-the-page-s-style-file" aria-label="Permalink to "When using Wot UI components in pages, you can directly override styles in the page's style file""></a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"primary"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Primary Button</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Page style */</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</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><h3 id="why-can-t-i-override-component-library-styles-in-components" tabindex="-1">Why can't I override component library styles in components? <a class="header-anchor" href="#why-can-t-i-override-component-library-styles-in-components" aria-label="Permalink to "Why can't I override component library styles in components?""></a></h3><p>When using Wot UI components in custom components, you need to enable the <code>styleIsolation: 'shared'</code> option</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"primary"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Primary Button</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>For <code>Vue 3.2</code> and below versions, you can use the following configuration to enable the <code>styleIsolation: 'shared'</code> option:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// vue</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styleIsolation: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'shared'</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;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setup</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Component style */</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</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>For <code>Vue 3.3+</code>, you can enable the <code>styleIsolation: 'shared'</code> option through <code>defineOptions</code>:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</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;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setup</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styleIsolation: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'shared'</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;">})</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><h2 id="mini-program-external-style-classes" tabindex="-1">Mini Program External Style Classes <a class="header-anchor" href="#mini-program-external-style-classes" aria-label="Permalink to "Mini Program External Style Classes""></a></h2><p>Wot UI provides many custom style classes for developers to use. The specific style class names can be found in the "External Style Classes" section of the corresponding component. Note that the priority of regular style classes and custom style classes is undefined, so please add <code>!important</code> when using to ensure the priority of external style classes.</p><div class="tip custom-block"><p class="custom-block-title">Please Note</p><p><code>Wot UI</code> components are all set with <code>scoped</code>, so its CSS will only affect the elements of the current component, similar to style encapsulation in Shadow DOM. If selectors in <code>scoped</code> styles want to make "deeper" selections, that is, affect child components, you can use the <code>:deep()</code> pseudo-class:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ... */</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;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><p>The above code will be compiled into:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">.a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-v-f3f3eg9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ... */</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>See <a href="https://vuejs.org/api/sfc-css-features.html#sfc-css-features" target="_blank" rel="noreferrer">Single File Component CSS Features</a> for details.</p></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-button"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"primary"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Primary Button</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Component style */</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</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="mini-program-custom-component-rendering-issue" tabindex="-1">Mini Program Custom Component Rendering Issue <a class="header-anchor" href="#mini-program-custom-component-rendering-issue" aria-label="Permalink to "Mini Program Custom Component Rendering Issue""></a></h2><p>WeChat/QQ/Baidu/Douyin mini programs have an extra level of nodes when rendering custom components compared to App/H5. Here's an example with the <code>divider</code> component:</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Usage --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- h5 rendering --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</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;">"wd-divider"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- WeChat mini program rendering --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <view class="wd-divider"></view></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="solution" tabindex="-1">Solution <a class="header-anchor" href="#solution" aria-label="Permalink to "Solution""></a></h3><p>On WeChat platform, this can be solved using <a href="https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE" target="_blank" rel="noreferrer">virtualHost</a>. When <code>virtualHost</code> is set to <code>true</code>, it will set custom nodes as virtual, making them behave more like Vue components and removing the extra outermost tag of WeChat mini program custom components. After enabling, you can also use <a href="https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin" target="_blank" rel="noreferrer">mergeVirtualHostAttributes</a> to merge the outer layer attributes of component virtual nodes.</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:#6A737D;--shiki-dark:#6A737D;">// Using virtualHost in vue2</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</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;"> options: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> virtualHost: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</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;">}</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Using virtualHost in vue3 script setup</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Set custom nodes as virtual to make them behave more like Vue components and remove the extra outermost tag of WeChat mini program custom components</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> virtualHost: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</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;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setup</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><h3 id="effect-of-enabling-virtualhost" tabindex="-1">Effect of Enabling virtualHost <a class="header-anchor" href="#effect-of-enabling-virtualhost" aria-label="Permalink to "Effect of Enabling virtualHost""></a></h3><p>Here's another example with the <code>divider</code> component:</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Usage --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- h5 rendering --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</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;">"wd-divider"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- WeChat mini program rendering --></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</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;">"wd-divider"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="how-to-customize-themes" tabindex="-1">How to customize themes? <a class="header-anchor" href="#how-to-customize-themes" aria-label="Permalink to "How to customize themes?""></a></h2><p>We provide CSS variables for each component. You can refer to the <a href="/en-US/component/config-provider.html">config-provider</a> component's usage guide to customize themes.</p><h2 id="why-are-toast-and-messagebox-component-calls-not-working" tabindex="-1">Why are Toast and MessageBox component calls not working? <a class="header-anchor" href="#why-are-toast-and-messagebox-component-calls-not-working" aria-label="Permalink to "Why are Toast and MessageBox component calls not working?""></a></h2><p>First, check if the usage is correct. The <code>uni-app</code> platform doesn't support global component mounting, so components like <code>Message</code> and <code>Toast</code> still need to be explicitly used in SFC, for example:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>The functional calls of <code>Message</code> and <code>Toast</code> are implemented based on <code>provide/inject</code>, so your calls must be made within <code>setup</code>.</p><h2 id="why-are-multiple-messageboxes-popping-up" tabindex="-1">Why are multiple messageBoxes popping up? <a class="header-anchor" href="#why-are-multiple-messageboxes-popping-up" aria-label="Permalink to "Why are multiple messageBoxes popping up?""></a></h2><p>Check if the page with multiple <code>messageBox</code> popups has multiple <code><wd-message-box></wd-message-box></code> tags with the same <code>selector</code> or no <code>selector</code> (including components used in the current page). The same applies to <code>toast</code>. When using components like <code>messageBox</code> in child components, you need to specify a <code>selector</code> and ensure the <code>selector</code> is unique.</p><h2 id="how-to-call-toast-message-loading-globally" tabindex="-1">How to call Toast, Message, Loading globally? <a class="header-anchor" href="#how-to-call-toast-message-loading-globally" aria-label="Permalink to "How to call Toast, Message, Loading globally?""></a></h2><p>For global calling solutions, see <a href="https://starter.wot-ui.cn/guide/feedback.html" target="_blank" rel="noreferrer">wot-starter</a>, which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.</p>`,52),l=[n];function p(h,o,r,k,d,c){return a(),i("div",null,l)}const u=s(t,[["render",p]]);export{E as __pageData,u as default};
|