| 1 |
- System.register(["./vendor-legacy.44d419bd.js"],(function(t){"use strict";var s,a,d;return{setters:[function(t){s=t.e,a=t.o,d=t.G}],execute:function(){const n={class:"markdown-body"},r=[d('<h1>Toast 吐司</h1><h3>介绍</h3><p>用于轻提示。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Toast);\n</code></pre><h2>代码演示</h2><h4>全局使用方式</h4><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { getCurrentInstance } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n <span class="hljs-keyword">const</span> { proxy } = getCurrentInstance();\n proxy.$toast.text(<span class="hljs-string">'全局使用方式'</span>);\n <span class="hljs-keyword">return</span> {};\n },\n};\n</code></pre><h4>文字提示</h4><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n Toast.text(<span class="hljs-string">'网络失败，请稍后再试~'</span>);\n <span class="hljs-keyword">return</span> {};\n },\n};\n</code></pre><h4>成功提示</h4><pre><code class="language-javascript">Toast.success(<span class="hljs-string">'成功提示'</span>);\n</code></pre><h4>失败提示</h4><pre><code class="language-javascript">Toast.fail(<span class="hljs-string">'失败提示'</span>);\n</code></pre><h4>警告提示</h4><pre><code class="language-javascript">Toast.warn(<span class="hljs-string">'警告提示'</span>);\n</code></pre><h4>加载提示</h4><pre><code class="language-javascript">Toast.loading(<span class="hljs-string">'加载中'</span>);\n</code></pre><h4>Toast不消失</h4><pre><code class="language-javascript">Toast.text(msg,{\n <span class="hljs-attr">duration</span>:<span class="hljs-number">0</span>\n});\n</code></pre><h4>Loading带透明罩</h4><pre><code class="language-javascript">Toast.loading(msg,{\n <span class="hljs-attr">cover</span>:<span class="hljs-literal">true</span>\n});\n</code></pre><h4>支持在JS模块中导入使用</h4><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">"@nutui/nutui"</span>;\nToast.text(<span class="hljs-string">'在js模块中使用'</span>);\n<span class="hljs-comment">// 返回实例，可以手动调用实例中的hide方法关闭提示</span>\n<span class="hljs-keyword">const</span> toast = Toast.loading(<span class="hljs-string">'在js模块中使用'</span>);\ntoast.hide();\n</code></pre><h3>API</h3><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th><th>返回值</th></tr></thead><tbody><tr><td>Toast.text</td><td>展示文字提示</td><td>message｜ options</td><td>toast 实例(message支持传入HTML)</td></tr><tr><td>Toast.success</td><td>展示成功提示</td><td>message｜ options</td><td>toast 实例</td></tr><tr><td>Toast.fail</td><td>展示失败提示</td><td>message｜ options</td><td>toast 实例</td></tr><tr><td>Toast.warn</td><td>展示警告提示</td><td>message｜ options</td><td>toast 实例</td></tr><tr><td>Toast.hide</td><td>关闭提示</td><td>force:boolean</td><td>void</td></tr><tr><td>Toast.loading</td><td>展示加载提示</td><td>message｜ options</td><td>toast 实例</td></tr></tbody></table><h2>Options</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>id</td><td>标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用</td><td>String/Number</td><td>-</td></tr><tr><td>duration</td><td>展示时长（毫秒）<br>值为 0 时，toast 不会自动消失</td><td>Number</td><td>2000</td></tr><tr><td>center</td><td>是否展示在页面中部（为false时展示在底部）</td><td>Boolean</td><td>true</td></tr><tr><td>bottom</td><td>距页面底部的距离（像素），option.center为false时生效</td><td>Number</td><td>30</td></tr><tr><td>text-align-center</td><td>多行文案是否居中</td><td>Boolean</td><td>true</td></tr><tr><td>bg-color</td><td>背景颜色（透明度）</td><td>String</td><td>“rgba(0, 0, 0, 0.8)”</td></tr><tr><td>custom-class</td><td>自定义类名</td><td>String</td><td>“”</td></tr><tr><td>icon</td><td>自定义图标，<strong>支持图片链接或base64格式</strong></td><td>String</td><td>“”</td></tr><tr><td>size</td><td>文案尺寸，<strong>small</strong>/<strong>base</strong>/<strong>large</strong>三选一</td><td>String</td><td>“base”</td></tr><tr><td>cover</td><td>是否显示遮罩层</td><td>Boolean</td><td>false</td></tr><tr><td>cover-color</td><td>遮罩层颜色，默认透明</td><td>String</td><td>“rgba(0,0,0,0)”</td></tr><tr><td>loading-rotate</td><td>loading图标是否旋转，仅对loading类型生效</td><td>Boolean</td><td>true</td></tr><tr><td>on-close</td><td>关闭时触发的事件</td><td>function</td><td>null</td></tr><tr><td>close-on-click-overlay</td><td>是否在点击遮罩层后关闭提示</td><td>Boolean</td><td>false</td></tr><tr><td>toast-style</td><td>提示框style</td><td>object</td><td>{}</td></tr><tr><td>toast-class</td><td>提示框class</td><td>String</td><td>“”</td></tr></tbody></table>',28)];t("default",{setup:(t,{expose:d})=>(d({frontmatter:{}}),(t,d)=>(a(),s("div",n,r)))})}}}));
|
