jobsys-newbie
Version:
Enhanced component based on ant-design-vue
6 lines (5 loc) • 9.41 kB
JavaScript
import{N as c}from"./NewbieModal-bbee8112.js";import{_ as h,r as i,e as m,o as b,c as v,b as t,f as n,d as s,w as l,u as o,a as d}from"./app-e5356031.js";import{B as k}from"./index-2bac9f50.js";import"./style-3dc3bceb.js";import"./isNull-4293306c.js";import"./isUndefined-aa0326a0.js";import"./compact-item-45f3d050.js";import"./index-4cb0cbae.js";import"./pickAttrs-024293c9.js";import"./ExclamationCircleFilled-71949edd.js";import"./omit-dc457db2.js";import"./styleChecker-8bbc1161.js";import"./CloseCircleFilled-7d1a9da0.js";import"./index-b4cb0b96.js";const _=t("h1",{id:"newbiemodal",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#newbiemodal","aria-hidden":"true"},"#"),n(" NewbieModal")],-1),g=t("blockquote",null,[t("p",null,"弹窗组件 可以选择使用 Modal 或者是 Drawer Modal 支持全屏以及拖动")],-1),f=t("p",null,"Version: 1.0.0",-1),q=t("h2",{id:"props",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#props","aria-hidden":"true"},"#"),n(" Props")],-1),w=t("thead",null,[t("tr",null,[t("th",null,"Prop name"),t("th",null,"Description"),t("th",null,"Type"),t("th",null,"Values"),t("th",null,"Default")])],-1),y=t("tr",null,[t("td",null,"type"),t("td",null,"弹窗类型"),t("td",null,"string"),t("td",null,[t("code",null,"modal"),n(", "),t("code",null,"drawer")]),t("td",null,'"modal"')],-1),x=t("tr",null,[t("td",null,"visible"),t("td",null,[n("可见性控制"),t("br"),t("code",null,"v-model:visible")]),t("td",null,"boolean"),t("td",null,"-"),t("td",null,"false")],-1),M=t("tr",null,[t("td",null,"width"),t("td",null,"宽度"),t("td",null,"number|string"),t("td",null,"-"),t("td",null,"800")],-1),N=t("tr",null,[t("td",null,"height"),t("td",null,"高度，仅当 Type 为 modal 时有效"),t("td",null,"number|string"),t("td",null,"-"),t("td",null,"500")],-1),V=t("tr",null,[t("td",null,"title"),t("td",null,"标题"),t("td",null,"string"),t("td",null,"-"),t("td",null,'""')],-1),B=t("tr",null,[t("td",null,"beforeClose"),t("td",null,[n("为 "),t("code",null,"Function"),n(" 时返回 Promise, resolve(true) 正常关闭，resolve(false) 可阻止关闭；"),t("br"),n("为 "),t("code",null,"Object"),n(" 时参考 "),t("a",{href:"#beforeclose"},"下方配置 beforeclose")]),t("td",null,"func|object"),t("td",null,"-"),t("td",null,"null")],-1),D=t("td",null,"modalProps",-1),C={href:"https://www.antdv.com/components/modal-cn#api",target:"_blank",rel:"noopener noreferrer"},P={href:"https://www.antdv.com/components/drawer-cn#api",target:"_blank",rel:"noopener noreferrer"},T=t("td",null,"object",-1),E=t("td",null,"-",-1),j=t("td",null,"{}",-1),I=d('<h2 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><table><thead><tr><th>Event name</th><th>Properties</th><th>Description</th></tr></thead><tbody><tr><td>update:visible</td><td><strong>visible</strong> <code>boolean</code> - 是否可见</td><td></td></tr><tr><td>close</td><td></td><td>关闭弹窗时回调</td></tr></tbody></table><hr><h2 id="详细参数" tabindex="-1"><a class="header-anchor" href="#详细参数" aria-hidden="true">#</a> 详细参数</h2><h3 id="beforeclose" tabindex="-1"><a class="header-anchor" href="#beforeclose" aria-hidden="true">#</a> <code>beforeClose</code></h3><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>title</td><td>Modal 提示框的 title</td><td>string</td><td>-</td><td>""</td></tr><tr><td>content</td><td>Modal 提示框的内容</td><td>string</td><td>-</td><td>""</td></tr><tr><td>okText</td><td>确认按钮的文字</td><td>string</td><td>-</td><td>"确定"</td></tr><tr><td>cancelText</td><td>取消按钮的文字</td><td>string</td><td>-</td><td>"取消"</td></tr><tr><td>trigger</td><td>是否出现提示框</td><td>func | boolean</td><td>-</td><td>false</td></tr></tbody></table><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><hr>',8),L=d(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modalVisible = true<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>弹出Modal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieModal</span> <span class="token attr-name"><span class="token namespace">v-model:</span>visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modalVisible<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这里是标题<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这里是内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieModal</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><hr>`,2),U=d(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawerVisible = true<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>弹出Drawer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieModal</span> <span class="token attr-name"><span class="token namespace">v-model:</span>visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawerVisible<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这里是标题<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这里是内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieModal</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>`,1),$={__name:"NewbieModal.html",setup(F){const p=i(!1),u=i(!1);return(O,a)=>{const r=m("ExternalLinkIcon");return b(),v("div",null,[_,g,f,q,t("table",null,[w,t("tbody",null,[y,x,M,N,V,B,t("tr",null,[D,t("td",null,[n("原生 "),t("a",C,[n("Modal"),s(r)]),n(" 或者是 "),t("a",P,[n("Drawer"),s(r)]),n(" 的配置")]),T,E,j])])]),I,s(o(k),{onClick:a[0]||(a[0]=e=>p.value=!0),type:"primary"},{default:l(()=>[n("弹出 Modal")]),_:1}),s(o(c),{visible:p.value,"onUpdate:visible":a[1]||(a[1]=e=>p.value=e),title:"这里是标题"},{default:l(()=>[n("这里是内容")]),_:1},8,["visible"]),L,s(o(k),{onClick:a[2]||(a[2]=e=>u.value=!0),type:"primary",style:{"margin-top":"20px"}},{default:l(()=>[n("弹出 Drawer")]),_:1}),s(o(c),{visible:u.value,"onUpdate:visible":a[3]||(a[3]=e=>u.value=e),type:"drawer",title:"这里是标题"},{default:l(()=>[n("这里是内容")]),_:1},8,["visible"]),U])}}},nt=h($,[["__file","NewbieModal.html.vue"]]);export{nt as default};