首页 发现 帮助
登录
githab
/
nutui
3
0
派生 0
文件
目录树: fd0e987e90
分支列表 标签列表
nutui
/
3.1.5
/
doc.08ec21c0.js

doc.08ec21c0.js 8.2 KB
文件历史 原始文件

1 
  1. import{e as s,o as t,G as a}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},p=[a('<h1>Popup 弹出层</h1><h3>介绍</h3><p>弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { Popup } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { Popup } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Popup);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p><code>visible</code> 控制显示/隐藏</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ padding: &#39;30px&#39; }&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>正文<span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n</code></pre><h3>弹出位置</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;top&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;20% }&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;left&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;100%&#39;, width: &#39;20%&#39; }&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n</code></pre><h3>图标</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;20%&#39; }&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">&quot;top-left&quot;</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;20%&#39; }&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">&quot;top-left&quot;</span>\n  <span class="hljs-attr">close-icon</span>=<span class="hljs-string">&quot;heart&quot;</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;20%&#39; }&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n</code></pre><h3>圆角弹框</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">round</span>\n  <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ height: &#39;30%&#39; }&quot;</span>\n  <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n</code></pre><h3>指定挂载节点</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-popup</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ padding: &#39;30px&#39; }&quot;</span> <span class="hljs-attr">teleport</span>=<span class="hljs-string">&quot;#app&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>app<span class="hljs-tag">&lt;/<span class="hljs-name">nut-popup</span>&gt;</span>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model:visible</td><td>当前组件是否显示</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>z-index</td><td>遮罩层级</td><td>String、Number</td><td><code>2000</code></td></tr><tr><td>duration</td><td>动画时长，单位秒</td><td>String、Number</td><td><code>0.3</code></td></tr><tr><td>overlay-class</td><td>自定义遮罩类名</td><td>String</td><td>-</td></tr><tr><td>overlay-style</td><td>自定义遮罩样式</td><td>CSSProperties</td><td>-</td></tr><tr><td>lock-scroll</td><td>背景是否锁定</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>overlay</td><td>是否显示遮罩</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>是否点击遮罩关闭</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>position</td><td>弹出位置（top,bottom,left,right,center）</td><td>String</td><td><code>&quot;center&quot;</code></td></tr><tr><td>transition</td><td>动画名</td><td>String</td><td>-</td></tr><tr><td>style</td><td>自定义弹框样式</td><td>CSSProperties</td><td>-</td></tr><tr><td>pop-class</td><td>自定义弹框类名</td><td>String</td><td>-</td></tr><tr><td>closeable</td><td>是否显示关闭按钮</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>close-icon-position</td><td>关闭按钮位置（top-left,top-right,bottom-left,bottom-right）</td><td>String</td><td><code>&quot;top-right&quot;</code></td></tr><tr><td>close-icon</td><td>自定义 Icon</td><td>String</td><td><code>&quot;close&quot;</code></td></tr><tr><td>destroy-on-close</td><td>组件销毁后是否关闭</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>round</td><td>是否显示圆角</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>teleport</td><td>指定挂载节点(<code>小程序不支持</code>)</td><td>String</td><td><code>&quot;body&quot;</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击弹框时触发</td><td><code>event: Event</code></td></tr><tr><td>click-close-icon</td><td>点击关闭图标时触发</td><td><code>event: Event</code></td></tr><tr><td>open</td><td>打开弹框时触发</td><td>-</td></tr><tr><td>close</td><td>关闭弹框时触发</td><td>-</td></tr><tr><td>opend</td><td>遮罩打开动画结束时触发</td><td><code>event: Event</code></td></tr><tr><td>closed</td><td>遮罩关闭动画结束时触发</td><td><code>event: Event</code></td></tr><tr><td>click-overlay</td><td>点击遮罩触发</td><td><code>event: Event</code></td></tr></tbody></table>',22)],l={setup:(a,{expose:l})=>(l({frontmatter:{}}),(a,l)=>(t(),s("div",n,p)))};export{l as default};
    2.