jobsys-newbie
Version:
Enhanced component based on ant-design-vue
29 lines (24 loc) • 17.3 kB
JavaScript
import{N as o}from"./NewbieButton-00521913.js";import{d as e,_ as h,r as f,e as _,o as q,c as y,b as n,f as a,w as u,u as t,h as d,a as r}from"./app-e5356031.js";import{S as v}from"./index-a79ee2a0.js";import{E as m}from"./EditOutlined-9c798a71.js";import{A as w}from"./compact-item-45f3d050.js";import"./index-2bac9f50.js";import"./useFlexGapSupport-e1acb751.js";import"./styleChecker-8bbc1161.js";var N={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"}}]},name:"save",theme:"outlined"};const B=N;function g(l){for(var s=1;s<arguments.length;s++){var p=arguments[s]!=null?Object(arguments[s]):{},c=Object.keys(p);typeof Object.getOwnPropertySymbols=="function"&&(c=c.concat(Object.getOwnPropertySymbols(p).filter(function(i){return Object.getOwnPropertyDescriptor(p,i).enumerable}))),c.forEach(function(i){O(l,i,p[i])})}return l}function O(l,s,p){return s in l?Object.defineProperty(l,s,{value:p,enumerable:!0,configurable:!0,writable:!0}):l[s]=p,l}var k=function(s,p){var c=g({},s,p.attrs);return e(w,g({},c,{icon:B}),null)};k.displayName="SaveOutlined";k.inheritAttrs=!1;const S=k,x=n("h1",{id:"newbiebutton",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#newbiebutton","aria-hidden":"true"},"#"),a(" NewbieButton")],-1),V=n("blockquote",null,[n("p",null,"按钮组件 在原生基础上增加了 loading 状态，以及图标的支持 loading 状态配合 useFetch 可以自动化处理")],-1),E=n("p",null,"Version: 1.0.0",-1),z=n("h2",{id:"props",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#props","aria-hidden":"true"},"#"),a(" Props")],-1),P=n("thead",null,[n("tr",null,[n("th",null,"Prop name"),n("th",null,"Description"),n("th",null,"Type"),n("th",null,"Values"),n("th",null,"Default")])],-1),j=n("tr",null,[n("td",null,"type"),n("td",null,"按钮类型"),n("td",null,"string"),n("td",null,[n("code",null,"primary"),a(", "),n("code",null,"ghost"),a(", "),n("code",null,"dashed"),a(", "),n("code",null,"link"),a(", "),n("code",null,"text"),a(", "),n("code",null,"default")]),n("td",null,'"default"')],-1),D=n("tr",null,[n("td",null,"size"),n("td",null,"按钮大小"),n("td",null,"string"),n("td",null,[n("code",null,"large"),a(", "),n("code",null,"middle"),a(", "),n("code",null,"small")]),n("td",null,'"middle"')],-1),T=n("tr",null,[n("td",null,"disabled"),n("td",null,"失效状态"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),A=n("tr",null,[n("td",null,"danger"),n("td",null,"设置危险按钮"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),C=n("tr",null,[n("td",null,"label"),n("td",null,"按钮标签"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),H=n("tr",null,[n("td",null,"icon"),n("td",null,"按钮图标，需要使用"),n("td",null,"object"),n("td",null,"-"),n("td",null,"null")],-1),I=n("tr",null,[n("td",null,"iconPosition"),n("td",null,"按钮图标位置"),n("td",null,"string"),n("td",null,[n("code",null,"left"),a(", "),n("code",null,"right")]),n("td",null,'"left"')],-1),L=n("tr",null,[n("td",null,"fetcher"),n("td",null,[a("请求状态控制器"),n("br"),n("code",null,"@params"),a(" .loading 是否加载中")]),n("td",null,"object"),n("td",null,"-"),n("td",null,[a("{"),n("br"),a(" loading: false"),n("br"),a("}")])],-1),M=n("td",null,"buttonProps",-1),$={href:"https://www.antdv.com/components/button-cn#api",target:"_blank",rel:"noopener noreferrer"},F=n("td",null,"object",-1),G=n("td",null,"-",-1),J=n("td",null,"{}",-1),Q=r('<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>click</td><td><strong>event</strong> <code>Event</code> - 点击事件</td><td></td></tr></tbody></table><hr><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><hr>',5),R=r(`<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>NewbieButton</span><span class="token punctuation">></span></span>默认<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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>点我<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<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>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>larger<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>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">danger</span><span class="token punctuation">></span></span>危险<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">danger</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>危险<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieButton</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr>`,2),U=r(`<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>NewbieButton</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">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h(EditOutlined)<span class="token punctuation">"</span></span> <span class="token attr-name">label</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>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h(EditOutlined)<span class="token punctuation">"</span></span> <span class="token attr-name">icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">label</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>NewbieButton</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),W=r(`<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>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieButton</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">:fetcher</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fetcher<span class="token punctuation">"</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h(SaveOutlined)<span class="token punctuation">"</span></span> <span class="token attr-name">label</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">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSave<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>NewbieButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<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 class="token keyword">import</span> <span class="token punctuation">{</span> NewbieButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"jobsys-newbie"</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> SaveOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@ant-design/icons-vue"</span>
<span class="token keyword">const</span> fetcher <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">onSave</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
fetcher<span class="token punctuation">.</span>value<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
fetcher<span class="token punctuation">.</span>value<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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 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>`,1),X={__name:"NewbieButton.html",setup(l){const s=f({loading:!1}),p=()=>{s.value.loading=!0,setTimeout(()=>{s.value.loading=!1},2e3)};return(c,i)=>{const b=_("ExternalLinkIcon");return q(),y("div",null,[x,V,E,z,n("table",null,[P,n("tbody",null,[j,D,T,A,C,H,I,L,n("tr",null,[M,n("td",null,[a("原生 "),n("a",$,[a("Button"),e(b)]),a(" 配置")]),F,G,J])])]),Q,e(t(v),null,{default:u(()=>[e(t(o),null,{default:u(()=>[a("默认")]),_:1}),e(t(o),{type:"primary"},{default:u(()=>[a("点我")]),_:1}),e(t(o),{type:"primary",size:"small"},{default:u(()=>[a("小点")]),_:1}),e(t(o),{type:"primary",size:"large"},{default:u(()=>[a("大点")]),_:1}),e(t(o),{type:"primary",danger:""},{default:u(()=>[a("危险")]),_:1}),e(t(o),{type:"primary",danger:"",disabled:""},{default:u(()=>[a("禁用")]),_:1})]),_:1}),R,e(t(v),null,{default:u(()=>[e(t(o),{type:"primary",icon:d(t(m)),label:"编辑"},null,8,["icon"]),e(t(o),{type:"primary",icon:d(t(m)),label:"编辑","icon-position":"right"},null,8,["icon"])]),_:1}),U,e(t(o),{type:"primary",fetcher:s.value,icon:d(t(S)),label:"保存",onClick:p},null,8,["fetcher","icon"]),W])}}},pn=h(X,[["__file","NewbieButton.html.vue"]]);export{pn as default};