40 lines
14 KiB
JavaScript
40 lines
14 KiB
JavaScript
|
import{_ as a,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function l(c,n){return p(),s("div",null,n[0]||(n[0]=[t(`<h1 id="弹窗" tabindex="-1"><a class="header-anchor" href="#弹窗"><span>弹窗</span></a></h1><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>框架提供了一个弹窗组件的封装BasicModal，该组件封装内容较为繁杂，实际使用不需要过多的功能，直接使用ant-design-vue的<a href="https://3x.antdv.com/components/modal-cn/#Modal-" target="_blank" rel="noopener noreferrer">modal对话框</a>组件即可。 下面是一个简单的弹窗组件示例，具体配置项可以点击上方链接查看文档：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-modal</span></span>
|
|||
|
|
<span class="line"> <span class="token attr-name">:closable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span></span>
|
|||
|
|
<span class="line"> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span></span>
|
|||
|
|
<span class="line"> <span class="token attr-name">centered</span></span>
|
|||
|
|
<span class="line"> <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>
|
|||
|
|
<span class="line"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span></span>
|
|||
|
|
<span class="line"> <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="line"> <span class="token comment"><!-- 弹窗正文内容 --></span></span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token comment"><!-- 弹窗底部按钮内容，有默认，如果需自定义就这么写 --></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</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 attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<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>a-button</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</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 attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>close<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>a-button</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-modal</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
|||
|
|
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
|||
|
|
<span class="line"><span class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 弹窗是否显示</span></span>
|
|||
|
|
<span class="line"><span class="token keyword">const</span> approveType <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 审批类型</span></span>
|
|||
|
|
<span class="line">fuinction <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 关闭弹窗</span></span>
|
|||
|
|
<span class="line"> visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
|
|||
|
|
<span class="line"><span class="token punctuation">}</span></span>
|
|||
|
|
<span class="line"><span class="token keyword">function</span> <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 保存</span></span>
|
|||
|
|
<span class="line"> <span class="token comment">// 提交逻辑</span></span>
|
|||
|
|
<span class="line"> visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
|
|||
|
|
<span class="line"><span class="token punctuation">}</span></span>
|
|||
|
|
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端弹窗使用uni-popup弹出层组件，组件源码也在系统中，具体参数配置可以看源码。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uni-popup</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>finishRef<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>dialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uni-popup-dialog</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inputClose<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>base<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 attr-name">content</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>
|
|||
|
|
<span class="line"> <span class="token attr-name">placeholder</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 attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flowFinishConfirm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token comment"><!--弹窗内容--></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup-dialog</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const u=a(e,[["render",l]]),i=JSON.parse('{"path":"/front_dev/adv/dialog.html","title":"弹窗","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744948341000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/dialog.md"}');export{u as comp,i as data};
|