| 1 |
- import{c as t,o as d,C as o}from"./vendor.ed841bd5.js";const e={class:"markdown-body"},s=o('<h1>Toast 吐司</h1><p>轻提示。</p><h3>介绍</h3><p>用于轻提示。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Toast } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Toast);\n</code></pre><h2>代码示例</h2><pre><code class="language-html"><nut-toast :msg="page.state.msg" v-model:visible="page.state.show" :type="page.state.type" @closed="page.methods.onClosed" :cover="page.state.cover" />\n<nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text','网络失败，请稍后再试~')"></nut-cell>\n<nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success','成功提示')"></nut-cell>\n<nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail','失败提示')"></nut-cell>\n<nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn','警告提示')"></nut-cell>\n<nut-cell title="Loading 加载提示" is-link @click="page.methods.openToast('loading','加载中')"></nut-cell>\n<nut-cell title="Loading 带白色背景遮罩" is-link @click="page.methods.openToast('loading','加载中',true)"></nut-cell>\n</code></pre><pre><code class="language-javascript">import { reactive } from 'vue';\nexport default {\n setup() {\n const page = {\n state: reactive({\n msg: 'toast',\n type: 'text',\n show: false,\n cover: false\n }),\n methods: {\n openToast: (type: string, msg: string, cover: boolean = false) => {\n page.state.show = true;\n page.state.msg = msg;\n page.state.type = type;\n page.state.cover = cover;\n },\n onClosed: () => console.log('closed')\n }\n };\n return {\n page\n };\n }\n};\n</code></pre><h3>基本用法</h3><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>options/message</td><td>toast 实例</td></tr><tr><td>Toast.success</td><td>展示成功提示</td><td>options/message</td><td>toast 实例</td></tr><tr><td>Toast.fail</td><td>展示失败提示</td><td>options/message</td><td>toast 实例</td></tr><tr><td>Toast.warn</td><td>展示警告提示</td><td>options/message</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>options/message</td><td>toast 实例</td></tr></tbody></table><h2>Props</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>msg</td><td>消息文本内容,支持传入HTML</td><td>String/VNode</td><td>“”</td></tr><tr><td>duration</td><td>展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）</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>距页面底部的距离（像素），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>对应icon组件，支持图片链接</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>是否显示遮罩层，loading类型默认显示</td><td>Boolean</td><td>loading类型true/其他类型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>',14),a={expose:[],setup:o=>(o,a)=>(d(),t("div",e,[s]))};export default a;
|
