import{e as s,o as a,G as d}from"./vendor.js";const n={class:"markdown-body"},l=d(`

Dialog \u5BF9\u8BDD\u6846

\u4ECB\u7ECD

\u6A21\u6001\u5BF9\u8BDD\u6846\uFF0C\u5728\u6D6E\u5C42\u4E2D\u663E\u793A\uFF0C\u5F15\u5BFC\u7528\u6237\u8FDB\u884C\u76F8\u5173\u64CD\u4F5C\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002

\u5F39\u51FA\u6846\u7EC4\u4EF6\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Dialog } from '@nutui/nutui';

const app = createApp();
app.use(Dialog);

\u51FD\u6570\u8C03\u7528

Dialog({
  title: '\u57FA\u7840\u5F39\u6846',
  content: '\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002'
});

Dialog({
  content: '\u65E0\u6807\u9898\u5F39\u6846'
});

Dialog({
  title: '\u63D0\u793A\u5F39\u6846',
  content: '\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002',
  noCancelBtn: true,
});

teleport \u4F7F\u7528\uFF0C\u6302\u8F7D\u5230\u6307\u5B9A\u8282\u70B9

<nut-dialog teleport="#app" ... />

Dialog({
  teleport: '#app',
  ...
});
Dialog({
  teleport: '.demo',
  ...
});

\u51FD\u6570\u8C03\u7528 proxy.&dialog(\u2026)

import { getCurrentInstance } from 'vue';

setup(){
  const { proxy } = getCurrentInstance();
  proxy.$dialog({
    title: '\u57FA\u7840\u5F39\u6846',
    content: '\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002'
  });
}

\u6807\u7B7E\u5F0F\u7EC4\u4EF6\u4F7F\u7528

<nut-dialog :title="title" :close-on-click-overlay="false" :content="content" v-model:visible="visible"></nut-dialog>

import { ref } from 'vue';
import { Dialog } from '@nutui/nutui';
export default {
  setup() {
    const visible = ref(true);
    const title = '\u6807\u7B7E\u5F0F\u4F7F\u7528';
    const content = '\u5185\u5BB9';
  
    return { visible,title,content };
  },
};

API

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6807\u9898	String	-
content	\u5185\u5BB9\uFF0C\u652F\u6301HTML	String	-
teleport	\u6307\u5B9A\u6302\u8F7D\u8282\u70B9	String	\u201Cbody\u201D
closeOnClickOverlay	\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5173\u95ED\u5BF9\u8BDD\u6846	Boolean	false
noFooter	\u662F\u5426\u9690\u85CF\u5E95\u90E8\u6309\u94AE\u680F	Boolean	false
noOkBtn	\u662F\u5426\u9690\u85CF\u786E\u5B9A\u6309\u94AE	Boolean	false
noCancelBtn	\u662F\u5426\u9690\u85CF\u53D6\u6D88\u6309\u94AE	Boolean	false
cancelText	\u53D6\u6D88\u6309\u94AE\u6587\u6848	String	\u201D\u53D6\u6D88\u201C
okText	\u786E\u5B9A\u6309\u94AE\u6587\u6848	String	\u201D\u786E\u5B9A\u201C
okBtnDisabled	\u7981\u7528\u786E\u5B9A\u6309\u94AE	Boolean	false
cancelAutoClose	\u53D6\u6D88\u6309\u94AE\u662F\u5426\u9ED8\u8BA4\u5173\u95ED\u5F39\u7A97	Boolean	true
textAlign	\u6587\u5B57\u5BF9\u9F50\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u540Ccss\u7684text-align	String	\u201Ccenter\u201D
closeOnPopstate	\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED	Boolean	false
onUpdate	\u66F4\u65B0	Boolean	false
onOk	\u786E\u5B9A\u6309\u94AE\u56DE\u8C03	Function	-
onCancel	\u53D6\u6D88\u6309\u94AE\u56DE\u8C03	Function	-
onOpen	\u80CC\u666F\u662F\u5426\u9501\u5B9A	Function	-
onClosed	\u5173\u95ED\u56DE\u8C03\uFF0C\u4EFB\u4F55\u60C5\u51B5\u5173\u95ED\u5F39\u7A97\u90FD\u4F1A\u89E6\u53D1	Function	-

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6807\u9898	String	-
content	\u5185\u5BB9\uFF0C\u652F\u6301HTML	String	-
teleport	\u6307\u5B9A\u6302\u8F7D\u8282\u70B9	String	\u201Cbody\u201D
close-on-click-overlay	\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5173\u95ED\u5BF9\u8BDD\u6846	Boolean	false
no-footer	\u662F\u5426\u9690\u85CF\u5E95\u90E8\u6309\u94AE\u680F	Boolean	false
no-ok-btn	\u662F\u5426\u9690\u85CF\u786E\u5B9A\u6309\u94AE	Boolean	false
no-cancel-btn	\u662F\u5426\u9690\u85CF\u53D6\u6D88\u6309\u94AE	Boolean	false
cancel-text	\u53D6\u6D88\u6309\u94AE\u6587\u6848	String	\u201D\u53D6\u6D88\u201C
ok-text	\u786E\u5B9A\u6309\u94AE\u6587\u6848	String	\u201D\u786E \u5B9A\u201C
ok-btn-disabled	\u7981\u7528\u786E\u5B9A\u6309\u94AE	Boolean	false
cancel-auto-close	\u53D6\u6D88\u6309\u94AE\u662F\u5426\u9ED8\u8BA4\u5173\u95ED\u5F39\u7A97	Boolean	true
text-align	\u6587\u5B57\u5BF9\u9F50\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u540Ccss\u7684text-align	String	\u201Ccenter\u201D
close-on-popstate	\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED	Boolean	false
lock-scroll	\u80CC\u666F\u662F\u5426\u9501\u5B9A	Boolean	false

Events

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
ok	\u786E\u5B9A\u6309\u94AE\u56DE\u8C03	Function	-
cancel	\u53D6\u6D88\u6309\u94AE\u56DE\u8C03	Function	-
closed	\u5173\u95ED\u56DE\u8C03\uFF0C\u4EFB\u4F55\u60C5\u51B5\u5173\u95ED\u5F39\u7A97\u90FD\u4F1A\u89E6\u53D1	Function	-

Slots

\u540D\u79F0	\u8BF4\u660E
header	\u81EA\u5B9A\u4E49\u6807\u9898\u533A\u57DF
default	\u81EA\u5B9A\u4E49\u5185\u5BB9
footer	\u81EA\u5B9A\u4E49\u5E95\u90E8\u6309\u94AE\u533A\u57DF

`,24),e=[l],i={setup(r,{expose:t}){return t({frontmatter:{}}),(p,c)=>(a(),s("div",n,e))}};export{i as default};