jobsys-explore
Version:
Enhanced component based on vant
8 lines (7 loc) • 5 kB
JavaScript
import{f as u,e as s,_ as i,o as r,c as d,b as l,u as e,w as k,d as h,a as c}from"./app-29fe8d1e.js";function g(t){return t===null}function v(t){return t===void 0}const b=t=>g(t)||v(t)?"auto":isNaN(t)?t:`${t}px`,o=u({name:"ExSector",props:{color:{type:String,default:"green"},height:{type:[Number,String],default:"100px"},title:{type:String,default:""},subtitle:{type:String,default:""}},setup(t,{slots:a}){const n=()=>a.title?s("view",{class:"ex-sector__title"},[a.title()]):t.title?s("view",{class:"ex-sector__title"},[t.title]):null,p=()=>a.subtitle?s("view",{class:"ex-sector__subtitle"},[a.subtitle()]):t.title?s("view",{class:"ex-sector__subtitle"},[t.subtitle]):null;return()=>s("view",{class:`ex-sector ex-sector__${t.color}`,style:{height:b(t.height)}},[n(),p()])}}),_=c('<h1 id="exsector" tabindex="-1"><a class="header-anchor" href="#exsector" aria-hidden="true">#</a> ExSector</h1><blockquote><p>块状导航</p></blockquote><p>Version: 1.0.0</p><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>color</td><td>自定义颜色</td><td>string</td><td><code>green</code>, <code>blue</code>, <code>orange</code>, <code>red</code></td><td>"green"</td></tr><tr><td>height</td><td>高度</td><td>number|string</td><td>-</td><td>"100px"</td></tr><tr><td>title</td><td>标题</td><td>string</td><td>-</td><td>""</td></tr><tr><td>subtitle</td><td>副标题</td><td>string</td><td>-</td><td>""</td></tr></tbody></table><hr><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><hr>',8),x={style:{width:"200px"}},m=l("view",{style:{color:"red"}},"红色",-1),f=c(`<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>ExSector</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">subtitle</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>ExSector</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>有slot的写法<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<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>template</span> <span class="token attr-name">#subtitle</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</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">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>红色<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</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>ExSector</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>`,1),q={__name:"ExSector.html",setup(t){return(a,n)=>(r(),d("div",null,[_,l("div",x,[s(e(o),{title:"普通的标题",subtitle:"有描述"}),s(e(o),{title:"有slot的写法",color:"blue"},{subtitle:k(()=>[m,h("与蓝色 ")]),_:1})]),f]))}},y=i(q,[["__file","ExSector.html.vue"]]);export{y as default};