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

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

\u5B89\u88C5

import { createApp } from 'vue';
import { Dialog,Popup,OverLay } from '@nutui/nutui-taro';

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

\u4F7F\u7528\u65B9\u5F0F

<nut-cell title="\u57FA\u7840\u5F39\u6846" @click="baseClick"></nut-cell>
<nut-dialog title="\u57FA\u7840\u5F39\u6846" content="\u8FD9\u662F\u57FA\u7840\u5F39\u6846\u3002" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />

<nut-cell title="\u65E0\u6807\u9898\u5F39\u6846" @click="noTitleClick"></nut-cell>
<nut-dialog content="\u8FD9\u662F\u65E0\u6807\u9898\u5F39\u6846\u3002" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />

<nut-cell title="\u63D0\u793A\u5F39\u6846" @click="tipsClick"></nut-cell>
<nut-dialog no-cancel-btn title="\u6E29\u99A8\u63D0\u793A" content="\u8FD9\u662F\u63D0\u793A\u5F39\u6846\u3002" v-model:visible="visible3" @cancel="onCancel" @ok="onOk" />

<nut-cell title="\u5E95\u90E8\u6309\u94AE \u5782\u76F4\u8C03\u7528" @click="verticalClick"></nut-cell>
<nut-dialog footer-direction="vertical" teleport="#app" title="\u6E29\u99A8\u63D0\u793A" content="\u8FD9\u662F\u63D0\u793A\u5F39\u6846\u3002" v-model:visible="visible5" />

<nut-cell title="\u5F02\u6B65\u5173\u95ED" @click="componentClick"></nut-cell>
<nut-dialog title="\u5F02\u6B65\u5173\u95ED" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />

import { ref } from 'vue';
export default {
  setup() {
    const visible1 = ref(false);
    const visible2 = ref(false);
    const visible3 = ref(false);
    const visible4 = ref(false);
    const visible5 = ref(false);
    const closeContent = ref('');
    const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
    const countDown = (second: number) => \`\u5012\u8BA1\u65F6 \${second} \u79D2\`;

    const onCancel = () => {
      console.log('event cancel');
    };
    const onOk = () => {
      console.log('event ok');
    };
    const onOkAsync = () => {
      sleep()
        .then(() => {
          closeContent.value = countDown(2);
          return sleep();
        })
        .then(() => {
          closeContent.value = countDown(1);
          return sleep();
        })
        .then(() => {
          closeContent.value = countDown(0);
        })
        .then(() => {
          visible4.value = false;
        });
    };

    const baseClick = (): void => {
      visible1.value = true;
    };
    const noTitleClick = () => {
      visible2.value = true;
    };
    const tipsClick = () => {
      visible3.value = true;
    };

    const componentClick = () => {
      closeContent.value = \`\u70B9\u51FB\u786E\u5B9A\u65F63s\u540E\u5173\u95ED\`;
      visible4.value = true;
    };

    const verticalClick = () => {
      visible5.value = true;
    };


    return {
      visible1,
      visible2,
      visible3,
      visible4,
      visible5,
      onCancel,
      onOk,
      closeContent,
      onOkAsync,
      baseClick,
      noTitleClick,
      componentClick,
      tipsClick,
      verticalClick
    };
  }
};

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
footer-direction	\u4F7F\u7528\u6A2A\u7EB5\u65B9\u5411 \u53EF\u9009\u503C horizontal\u3001vertical	string	horizontal

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

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