wot-design-uni/assets/component_status-tip.md.BvIC-tWU.js

import{_ as e,E as h,c as n,o as l,aR as p,I as t,a as s,w as a}from"./chunks/framework.C7RrxATG.js";const m=JSON.parse('{"title":"StatusTip 缺省提示","description":"","frontmatter":{},"headers":[],"relativePath":"component/status-tip.md","filePath":"component/status-tip.md","lastUpdated":1762249100000}'),k={name:"component/status-tip.md"},d=p(`<h1 id="statustip-缺省提示" tabindex="-1">StatusTip 缺省提示 <a class="header-anchor" href="#statustip-缺省提示" aria-label="Permalink to &quot;StatusTip 缺省提示&quot;">​</a></h1><p>一般用于兜底占位展示。</p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>本组件使用图片均为外链，<strong><em>不保证稳定性</em></strong>，推荐将图片下载到开发者的服务器后通过自定义图片<code>URL</code>或者自定义<code>url-prefix</code>使用。1.3.11版本开始支持自定义图片地址前缀<code>url-prefix</code>。</p><p>下载地址：</p><ol><li>Github 仓库：<a href="https://github.com/Moonofweisheng/wot-design-uni-assets" target="_blank" rel="noreferrer">https://github.com/Moonofweisheng/wot-design-uni-assets</a></li><li>npm 地址：</li></ol><ul><li>npm：<a href="https://www.npmjs.com/package/wot-design-uni-assets" target="_blank" rel="noreferrer">https://www.npmjs.com/package/wot-design-uni-assets</a></li><li>淘宝镜像：<a href="https://npmmirror.com/package/wot-design-uni-assets" target="_blank" rel="noreferrer">https://npmmirror.com/package/wot-design-uni-assets</a></li></ul></div><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to &quot;基本用法&quot;">​</a></h2><p>设置 <code>image</code> 修改展示缺省图片类型，默认为 <code>network</code>，可选值 <code>search</code>, <code>network</code>, <code>content</code>, <code>collect</code>, <code>comment</code>, <code>halo</code>, <code>message</code>。可设置 <code>tip</code> 来控制展示提示文案。</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;当前搜索无结果&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;network&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;该页面暂时无法访问&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;content&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;暂无内容&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collect&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;暂无收藏&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;comment&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;当前没有联系人名单哦～&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;halo&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;支付失败，请重新订购&quot;</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;message&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已订阅全部消息&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="自定义大小" tabindex="-1">自定义大小 <a class="header-anchor" href="#自定义大小" aria-label="Permalink to &quot;自定义大小&quot;">​</a></h2><p>通过 <code>image-size</code> 属性图片的大小。</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-status-tip</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  :image-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">          height: 200,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">          width: 300</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;search&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;当前搜索无结果&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="自定义图片" tabindex="-1">自定义图片 <a class="header-anchor" href="#自定义图片" aria-label="Permalink to &quot;自定义图片&quot;">​</a></h2><p>需要自定义图片时，可以在 <code>image</code> 属性中传入任意图片 URL。</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://wot-ui.cn/assets/panda.jpg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;查看我的头像&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="自定义图片内容" tabindex="-1">自定义图片内容 <a class="header-anchor" href="#自定义图片内容" aria-label="Permalink to &quot;自定义图片内容&quot;">​</a></h2><p>使用插槽 <code>image</code> 可以自定义图片内容。</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-status-tip</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;自定义图片内容&quot;</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;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> #image</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-icon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ie-filled&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-icon</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;">template</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-status-tip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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>image</td><td>缺省图片类型，支持传入图片 URL</td><td>string</td><td>search / network / content / collect / comment / halo / message</td><td>network</td><td>-</td></tr><tr><td>image-size</td><td>图片大小，默认单位为 <code>px</code></td><td><code>string</code>/<code>number</code>/<code>ImageSize</code></td><td>-</td><td>-</td><td>-</td></tr><tr><td>tip</td><td>提示文案</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>image-mode</td><td>预览图片的 mode 属性</td><td><code>ImageMode</code></td><td>-</td><td>aspectFit</td><td>1.2.12</td></tr><tr><td>url-prefix</td><td>图片路径前缀，指向图片所在目录，用于拼接图片 URL。</td><td>string</td><td>-</td><td><a href="https://registry.npmmirror.com/wot-design-uni-assets/*/files/" target="_blank" rel="noreferrer">https://registry.npmmirror.com/wot-design-uni-assets/*/files/</a></td><td>1.3.11</td></tr></tbody></table><h3 id="imagesize" tabindex="-1">ImageSize <a class="header-anchor" href="#imagesize" aria-label="Permalink to &quot;ImageSize&quot;">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>height</td><td>图片高度，默认单位为 <code>px</code></td><td>string / number</td><td>-</td><td>-</td><td>1.2.12</td></tr><tr><td>width</td><td>图片宽度，默认单位为 <code>px</code></td><td>string / number</td><td>-</td><td>-</td><td>1.2.12</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h2><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>image</td><td>图片内容</td><td>1.3.12</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to &quot;源代码&quot;">​</a></h2>`,22);function r(o,E,g,c,u,y){const i=h("ExternalLink");return l(),n("div",null,[d,t(i,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/statusTip"},{default:a(()=>[s("文档")]),_:1}),s(" • "),t(i,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-status-tip"},{default:a(()=>[s("组件")]),_:1})])}const b=e(k,[["render",r]]);export{m as __pageData,b as default};