wot-design-uni/assets/component_toast.md.BZuJA7Lz.js

45 lines
23 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{_ as d,E as n,c as e,o as h,aR as l,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const F=JSON.parse('{"title":"Toast 轻提示","description":"","frontmatter":{},"headers":[],"relativePath":"component/toast.md","filePath":"component/toast.md","lastUpdated":1762249100000}'),p={name:"component/toast.md"},k=l(`<h1 id="toast-轻提示" tabindex="-1">Toast 轻提示 <a class="header-anchor" href="#toast-轻提示" aria-label="Permalink to &quot;Toast 轻提示&quot;"></a></h1><p>轻提示组件,用于消息通知、加载提示、操作结果提示等场景,支持函数式调用。</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p><code>Toast</code> 自 1.7.0 版本起支持通过 <code>props</code> 属性控制组件样式,字段见<a href="#props">props</a>需要注意的是函数式调用api的<code>options</code>优先级高于<code>props</code>。</p><p>全局调用方案见 <a href="https://starter.wot-ui.cn/guide/feedback.html" target="_blank" rel="noreferrer">wot-starter</a>,支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。</p></div><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to &quot;基本用法&quot;"></a></h2><p>需要在页面中引入该组件,作为挂载点。</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</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;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;showToast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;toast&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><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;"> { useToast } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/uni_modules/wot-design-uni&#39;</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;"> toast</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useToast</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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showToast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#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><h2 id="成功、异常、警告、常规" tabindex="-1">成功、异常、警告、常规 <a class="header-anchor" href="#成功、异常、警告、常规" aria-label="Permalink to &quot;成功、异常、警告、常规&quot;"></a></h2><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:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;操作成功&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;手机验证码输入错误,请重新输入&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;常规提示信息&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="使用图标" tabindex="-1">使用图标 <a class="header-anchor" href="#使用图标" aria-label="Permalink to &quot;使用图标&quot;"></a></h2><p>可以使用<code>iconClass</code>指定图标,结合<code>classPrefix</code>可以使用自定义图标,参见 <a href="/component/icon.html#自定义图标">Icon 自定义图标</a>。</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;">// 使用组件库内部图标</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> iconClass: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;star&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;使用组件库内部图标&#39;</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;">// 使用自定义图标</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> iconClass: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;kehuishouwu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> classPrefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fish&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;使用自定义图标&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="提示位置" tabindex="-1">提示位置 <a class="header-anchor" href="#提示位置" aria-label="Permalink to &quot;提示位置&quot;"></a></h2><p>通过设置 <code>position</code> 属性,可以设置提示信息的位置,默认为 <code>middle-top</code>。</p><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:#6A737D;--shiki-dark:#6A737D;">// 顶部提示</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#39;</span></span>
<span class="line"><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;">// 局中提示</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;middle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#39;</span></span>
<span class="line"><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;">// 底部提示</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;提示信息&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="排版方向" tabindex="-1">排版方向 <a class="header-anchor" href="#排版方向" aria-label="Permalink to &quot;排版方向&quot;"></a></h2><p><code>direction</code> 可设置排版方向,默认为横向排版。</p><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:#6A737D;--shiki-dark:#6A737D;">// 纵向排版</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;纵向排版&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> direction: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;vertical&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="关闭提示" tabindex="-1">关闭提示 <a class="header-anchor" href="#关闭提示" aria-label="Permalink to &quot;关闭提示&quot;"></a></h2><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:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="loading-提示" tabindex="-1">loading 提示 <a class="header-anchor" href="#loading-提示" aria-label="Permalink to &quot;loading 提示&quot;"></a></h2><p><code>loading</code> 开启后需要用户手动关闭,关闭可以调用 <code>close</code>,或者再调用一次 toast 提示,因为 toast 只会存在一个,新的 toast 会自动顶掉旧的 toast。</p><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:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;加载中...&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>修改 loading 指示器类型:</p><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:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> loadingType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ring&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;加载中...&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>手动关闭 loading</p><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:#24292E;--shiki-dark:#E1E4E8;">toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;"></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>selector</td><td>选择器</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>-</td></tr><tr><td>msg</td><td>提示信息</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>1.7.0</td></tr><tr><td>direction</td><td>排列方向</td><td>string</td><td>vertical / horizontal</td><td>horizontal</td><td>1.7.0</td></tr><tr><td>iconName</td><td>图标类型</td><td>string</td><td>success / error / warning / loading / info</td><td>&#39;&#39;</td><td>1.7.0</td></tr><tr><td>iconSize</td><td>图标大小</td><td>number</td><td>-</td><td>-</td><td>1.7.0</td></tr><tr><td>loadingType</td><td>加载类型</td><td>string</td><td>outline / ring</td><td>outline</td><td>1.7.0</td></tr><tr><td>loadingColor</td><td>加载颜色</td><td>string</td><td>-</td><td>#4D80F0</td><td>1.7.0</td></tr><tr><td>loadingSize</td><td>加载大小</td><td>number</td><td>-</td><td>-</td><td>1.7.0</td></tr><tr><td>iconColor</td><td>图标颜色</td><td>string</td><td>-</td><td>-</td><td>1.7.0</td></tr><tr><td>position</td><td>提示信息框的位置</td><td>string</td><td>top / middle-top / middle / bottom</td><td>middle-top</td><td>1.7.0</td></tr><tr><td>zIndex</td><td>层级</td><td>number</td><td>-</td><td>100</td><td>1.7.0</td></tr><tr><td>cover</td><td>是否存在遮罩层</td><td>boolean</td><td>-</td><td>false</td><td>1.7.0</td></tr><tr><td>iconClass</td><td>图标类名</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>1.7.0</td></tr><tr><td>classPrefix</td><td>类名前缀,用于使用自定义图标</td><td>string</td><td>-</td><td>wd-icon</td><td>1.7.0</td></tr><tr><td>opened</td><td>完全展示后的回调函数</td><td>Function</td><td>-</td><td>-</td><td>1.7.0</td></tr><tr><td>closed</td><td>完全关闭时的回调函数</td><td>Function</td><td>-</td><td>-</td><td>1.7.0</td></tr></tbody></table><h2 id="options" tabindex="-1">Options <a class="header-anchor" href="#options" aria-label="Permalink to &quot;Options&quot;"></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>msg</td><td>消息内容</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>-</td></tr><tr><td>duration</td><td>持续时间,单位 ms为 0 时表示不自动关闭</td><td>number</td><td>-</td><td>2000</td><td>-</td></tr><tr><td>direction</td><td>排版方向</td><td>string</td><td>vertical / horizontal</td><td>horizontal</td><td>1.7.0</td></tr><tr><td>iconName</td><td>图标类型</td><td>string</td><td>success / error / warning</td><td>&#39;&#39;</td><td>-</td></tr><tr><td>iconSize</td><td>左侧图标尺寸</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>iconClass</td><td>图标类目,自定义图标,可以使用 Icon 章节的那些图标类名iconName 优先级更高</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>-</td></tr><tr><td>classPrefix</td><td>类名前缀,用于使用自定义图标</td><td>string</td><td>-</td><td>&#39;wd-icon&#39;</td><td>-</td></tr><tr><td>position</td><td>提示信息框的位置</td><td>string</td><td>top / middle / bottom</td><td>middle-top</td><td>-</td></tr><tr><td>zIndex</td><td>toast 层级</td><td>number</td><td>-</td><td>100</td><td>-</td></tr><tr><td>loadingType</td><td><a href="/component/loading.html">加载中图标类型</a></td><td>string</td><td>ring</td><td>outline</td><td>-</td></tr><tr><td>loadingColor</td><td><a href="/component/loading.html">加载中图标颜色</a></td><td>string</td><td>-</td><td>#4D80F0</td><td>-</td></tr><tr><td>selector</td><td>指定唯一标识</td><td>string</td><td>-</td><td>&#39;&#39;</td><td>-</td></tr><tr><td>cover</td><td>是否存在一个透明遮罩</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>opened</td><td>完全展示后的回调函数</td><td>Function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>closed</td><td>完全关闭后的回调函数</td><td>Function</td><td>-</td><td>-</td><td>-</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to &quot;Methods&quot;"></a></h2><table tabindex="0"><thead><tr><th>方法名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>success</td><td>成功提示</td><td>options</td><td>-</td></tr><tr><td>error</td><td>错误提示</td><td>options</td><td>-</td></tr><tr><td>info</td><td>常规提示</td><td>options</td><td>-</td></tr><tr><td>warning</td><td>警告提示</td><td>options</td><td>-</td></tr><tr><td>loading</td><td>加载提示</td><td>options</td><td>-</td></tr><tr><td>close</td><td>手动关闭消息提示框,是 Toast 实例上的方法</td><td>-</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to &quot;外部样式类&quot;"></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to &quot;源代码&quot;"></a></h2>`,37);function r(o,E,c,g,y,u){const s=n("ExternalLink");return h(),e("div",null,[k,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/toast"},{default:a(()=>[t("文档")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-toast"},{default:a(()=>[t("组件")]),_:1})])}const m=d(p,[["render",r]]);export{F as __pageData,m as default};