| 1 |
- import{c as t,o as n,C as o}from"./vendor.870c33cc.js";const e={class:"markdown-body"},d=o('<h1>Dialog 对话框</h1><h3>介绍</h3><p>模态对话框，在浮层中显示，引导用户进行相关操作，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Dialog } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Dialog);\n</code></pre><h2>使用方式</h2><pre><code class="language-html"><nut-cell title="基础弹框" @click="baseClick"></nut-cell>\n<nut-dialog title="基础弹框" content="这是基础弹框。" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />\n\n<nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>\n<nut-dialog content="这是无标题弹框。" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />\n\n<nut-cell title="提示弹框" @click="tipsClick"></nut-cell>\n<nut-dialog no-cancel-btn title="温馨提示" content="这是提示弹框。" v-model:visible="visible3" @cancel="onCancel" @ok="onOk" />\n\n<nut-cell title="异步关闭" @click="componentClick"></nut-cell>\n<nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />\n</code></pre><pre><code class="language-javascript">import { ref } from 'vue';\nexport default {\n setup() {\n const visible1 = ref(false);\n const visible2 = ref(false);\n const visible3 = ref(false);\n const visible4 = ref(false);\n const closeContent = ref('');\n const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));\n const countDown = (second: number) => `倒计时 ${second} 秒`;\n\n const onCancel = () => {\n console.log('event cancel');\n };\n const onOk = () => {\n console.log('event ok');\n };\n const onOkAsync = () => {\n sleep()\n .then(() => {\n closeContent.value = countDown(2);\n return sleep();\n })\n .then(() => {\n closeContent.value = countDown(1);\n return sleep();\n })\n .then(() => {\n closeContent.value = countDown(0);\n })\n .then(() => {\n visible4.value = false;\n });\n };\n\n const baseClick = (): void => {\n visible1.value = true;\n };\n const noTitleClick = () => {\n visible2.value = true;\n };\n const tipsClick = () => {\n visible3.value = true;\n };\n\n const componentClick = () => {\n closeContent.value = `点击确定时3s后关闭`;\n visible4.value = true;\n };\n\n return {\n visible1,\n visible2,\n visible3,\n visible4,\n onCancel,\n onOk,\n closeContent,\n onOkAsync,\n baseClick,\n noTitleClick,\n componentClick,\n tipsClick\n };\n }\n};\n</code></pre><h2>Props</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题</td><td>String</td><td>-</td></tr><tr><td>content</td><td>内容，支持HTML</td><td>String</td><td>-</td></tr><tr><td>teleport</td><td>指定挂载节点</td><td>String</td><td>“body”</td></tr><tr><td>close-on-click-overlay</td><td>点击蒙层是否关闭对话框</td><td>Boolean</td><td>false</td></tr><tr><td>no-footer</td><td>是否隐藏底部按钮栏</td><td>Boolean</td><td>false</td></tr><tr><td>no-ok-btn</td><td>是否隐藏确定按钮</td><td>Boolean</td><td>false</td></tr><tr><td>no-cancel-btn</td><td>是否隐藏取消按钮</td><td>Boolean</td><td>false</td></tr><tr><td>cancel-text</td><td>取消按钮文案</td><td>String</td><td>”取消“</td></tr><tr><td>ok-text</td><td>确定按钮文案</td><td>String</td><td>”确 定“</td></tr><tr><td>ok-btn-disabled</td><td>禁用确定按钮</td><td>Boolean</td><td>false</td></tr><tr><td>cancel-auto-close</td><td>取消按钮是否默认关闭弹窗</td><td>Boolean</td><td>true</td></tr><tr><td>text-align</td><td>文字对齐方向，可选值同css的text-align</td><td>String</td><td>“center”</td></tr><tr><td>close-on-popstate</td><td>是否在页面回退时自动关闭</td><td>Boolean</td><td>false</td></tr><tr><td>lock-scroll</td><td>背景是否锁定</td><td>Boolean</td><td>false</td></tr></tbody></table><h2>Events</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>ok</td><td>确定按钮回调</td><td>Function</td><td>-</td></tr><tr><td>cancel</td><td>取消按钮回调</td><td>Function</td><td>-</td></tr><tr><td>closed</td><td>关闭回调，任何情况关闭弹窗都会触发</td><td>Function</td><td>-</td></tr></tbody></table><h2>Slots</h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>header</td><td>自定义标题区域</td></tr><tr><td>default</td><td>自定义内容</td></tr><tr><td>footer</td><td>自定义底部按钮区域</td></tr></tbody></table>',14),l={expose:[],setup:o=>(o,l)=>(n(),t("div",e,[d]))};export default l;
|
