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

Popup \u5F39\u51FA\u5C42

\u4ECB\u7ECD

\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A

\u5B89\u88C5

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

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

visible \u63A7\u5236\u663E\u793A/\u9690\u85CF

<nut-popup :style="{ padding: '30px' }" v-model:visible="show">\u6B63\u6587</nut-popup>

\u5F39\u51FA\u4F4D\u7F6E

<nut-popup
  position="top"
  v-model:visible="show"
  :style="{ height: '20% }"
></nut-popup>

<nut-popup
  position="left"
  v-model:visible="show"
  :style="{ height: '100%', width: '20%' }"
></nut-popup>

\u56FE\u6807

<nut-popup
  position="bottom"
  closeable
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>

<nut-popup
  position="bottom"
  closeable
  close-icon-position="top-left"
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>

<nut-popup
  position="bottom"
  closeable
  close-icon-position="top-left"
  close-icon="heart"
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>

\u5706\u89D2\u5F39\u6846

<nut-popup
  position="bottom"
  closeable
  round
  :style="{ height: '30%' }"
  v-model:visible="show"
></nut-popup>

\u6307\u5B9A\u6302\u8F7D\u8282\u70B9

<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:visible="show">app</nut-popup>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model:visible	\u5F53\u524D\u7EC4\u4EF6\u662F\u5426\u663E\u793A	Boolean	`false`
z-index	\u906E\u7F69\u5C42\u7EA7	String\u3001Number	`2000`
duration	\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2	String\u3001Number	`0.3`
overlay-class	\u81EA\u5B9A\u4E49\u906E\u7F69\u7C7B\u540D	String	-
overlay-style	\u81EA\u5B9A\u4E49\u906E\u7F69\u6837\u5F0F	CSSProperties	-
lock-scroll	\u80CC\u666F\u662F\u5426\u9501\u5B9A	Boolean	`true`
overlay	\u662F\u5426\u663E\u793A\u906E\u7F69	Boolean	`true`
close-on-click-overlay	\u662F\u5426\u70B9\u51FB\u906E\u7F69\u5173\u95ED	Boolean	`true`
position	\u5F39\u51FA\u4F4D\u7F6E\uFF08top,bottom,left,right,center\uFF09	String	`"center"`
transition	\u52A8\u753B\u540D	String	-
style	\u81EA\u5B9A\u4E49\u5F39\u6846\u6837\u5F0F	CSSProperties	-
pop-class	\u81EA\u5B9A\u4E49\u5F39\u6846\u7C7B\u540D	String	-
closeable	\u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE	Boolean	`false`
close-icon-position	\u5173\u95ED\u6309\u94AE\u4F4D\u7F6E\uFF08top-left,top-right,bottom-left,bottom-right\uFF09	String	`"top-right"`
close-icon	\u81EA\u5B9A\u4E49 Icon	String	`"close"`
destroy-on-close	\u7EC4\u4EF6\u9500\u6BC1\u540E\u662F\u5426\u5173\u95ED	Boolean	`true`
round	\u662F\u5426\u663E\u793A\u5706\u89D2	Boolean	`false`
teleport	\u6307\u5B9A\u6302\u8F7D\u8282\u70B9(`\u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301`)	String	`"body"`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u5F39\u6846\u65F6\u89E6\u53D1	`event: Event`
click-close-icon	\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1	`event: Event`
open	\u6253\u5F00\u5F39\u6846\u65F6\u89E6\u53D1	-
close	\u5173\u95ED\u5F39\u6846\u65F6\u89E6\u53D1	-
opend	\u906E\u7F69\u6253\u5F00\u52A8\u753B\u7ED3\u675F\u65F6\u89E6\u53D1	`event: Event`
closed	\u906E\u7F69\u5173\u95ED\u52A8\u753B\u7ED3\u675F\u65F6\u89E6\u53D1	`event: Event`
click-overlay	\u70B9\u51FB\u906E\u7F69\u89E6\u53D1	`event: Event`

`,22),o=[p],u={setup(d,{expose:s}){return s({frontmatter:{}}),(c,r)=>(a(),t("div",l,o))}};export{u as default};