| 1 |
- import{c as t,o as d,C as e}from"./vendor.870c33cc.js";const n={class:"markdown-body"},o=e('<h1>Dialog 对话框</h1><h3>介绍</h3><p>模态对话框，在浮层中显示，引导用户进行相关操作，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。</p><p>弹出框组件支持函数调用和组件调用两种方式。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Dialog } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Dialog);\n</code></pre><h2>函数调用</h2><pre><code class="language-javascript">Dialog({\n title: '基础弹框',\n content: '支持函数调用和组件调用两种方式。'\n});\n\nDialog({\n content: '无标题弹框'\n});\n\nDialog({\n title: '提示弹框',\n content: '支持函数调用和组件调用两种方式。',\n noCancelBtn: true,\n});\n</code></pre><h2>teleport 使用，挂载到指定节点</h2><pre><code class="language-html"><nut-dialog teleport="#app" ... />\n</code></pre><pre><code class="language-javascript">Dialog({\n teleport: '#app',\n ...\n});\nDialog({\n teleport: '.demo',\n ...\n});\n</code></pre><h2>函数调用 proxy.&dialog(…)</h2><pre><code class="language-javascript">import { getCurrentInstance } from 'vue';\n\nsetup(){\n const { proxy } = getCurrentInstance();\n proxy.$dialog({\n title: '基础弹框',\n content: '支持函数调用和组件调用两种方式。'\n });\n}\n</code></pre><h2>标签式组件使用</h2><pre><code class="language-html"><nut-dialog :title="title" :close-on-click-overlay="false" :content="content" v-model:visible="visible"></nut-dialog>\n</code></pre><pre><code class="language-javascript">import { ref } from 'vue';\nimport { Dialog } from '@nutui/nutui';\nexport default {\n setup() {\n const visible = ref(true);\n const title = '标签式使用';\n const content = '内容';\n \n return { visible,title,content };\n },\n};\n</code></pre><h2>API</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>closeOnClickOverlay</td><td>点击蒙层是否关闭对话框</td><td>Boolean</td><td>false</td></tr><tr><td>noFooter</td><td>是否隐藏底部按钮栏</td><td>Boolean</td><td>false</td></tr><tr><td>noOkBtn</td><td>是否隐藏确定按钮</td><td>Boolean</td><td>false</td></tr><tr><td>noCancelBtn</td><td>是否隐藏取消按钮</td><td>Boolean</td><td>false</td></tr><tr><td>cancelText</td><td>取消按钮文案</td><td>String</td><td>”取消“</td></tr><tr><td>okText</td><td>确定按钮文案</td><td>String</td><td>”确定“</td></tr><tr><td>okBtnDisabled</td><td>禁用确定按钮</td><td>Boolean</td><td>false</td></tr><tr><td>cancelAutoClose</td><td>取消按钮是否默认关闭弹窗</td><td>Boolean</td><td>true</td></tr><tr><td>textAlign</td><td>文字对齐方向，可选值同css的text-align</td><td>String</td><td>“center”</td></tr><tr><td>closeOnPopstate</td><td>是否在页面回退时自动关闭</td><td>Boolean</td><td>false</td></tr><tr><td>onUpdate</td><td>更新</td><td>Boolean</td><td>false</td></tr><tr><td>onOk</td><td>确定按钮回调</td><td>Function</td><td>-</td></tr><tr><td>onCancel</td><td>取消按钮回调</td><td>Function</td><td>-</td></tr><tr><td>onOpen</td><td>背景是否锁定</td><td>Function</td><td>-</td></tr><tr><td>onClosed</td><td>关闭回调，任何情况关闭弹窗都会触发</td><td>Function</td><td>-</td></tr></tbody></table><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>',24),r={expose:[],setup:e=>(e,r)=>(d(),t("div",n,[o]))};export default r;
|
