vue-pure-admin/dist/static/js/index-99f4857d.js

2 lines
3.9 KiB
JavaScript

import{m as D}from"./message-06c300cd.js";import{d as x}from"./home-filled-05cc090c.js";import{u as _}from"./hooks-adba4fcf.js";import{d as R,r as i,a6 as S,A as B,f as e,M as L,L as b,n as $,a7 as N,Y as W,b as k,c as A,w as I,e as E,u as d,h as u,g as C}from"./index-3eff57df.js";const T={options:{type:Array,default:()=>[]},defaultValue:{type:Number,default:0}},X=R({name:"ReSegmented",props:T,emits:["change"],setup(w,{emit:y}){const p=i(0),f=i(0),{isDark:h}=S(),g=i(!1),o=i(-1),c=i(""),r=N(),t=i(w.defaultValue);function n({option:a,index:l},s){a.disabled||(s.preventDefault(),t.value=l,c.value="",y("change",{index:l,option:a}))}function v({option:a,index:l},s){s.preventDefault(),o.value=l,a.disabled||t.value===l?c.value="":c.value=h.value?"#1f1f1f":"rgba(0, 0, 0, 0.06)"}function j(a,l){l.preventDefault(),o.value=-1}function M(a=t.value){$(()=>{var s;const l=(s=r==null?void 0:r.proxy)==null?void 0:s.$refs[`labelRef${a}`];p.value=l.clientWidth,f.value=l.offsetLeft,g.value=!0})}B(()=>t.value,a=>{$(()=>{M(a)})},{deep:!0,immediate:!0});const V=()=>w.options.map((a,l)=>e("label",{ref:`labelRef${l}`,class:["pure-segmented-item",(a==null?void 0:a.disabled)&&"pure-segmented-item-disabled"],style:{background:o.value===l?c.value:"",color:!a.disabled&&(t.value===l||o.value===l)?h.value?"rgba(255, 255, 255, 0.85)":"rgba(0,0,0,.88)":""},onMouseenter:s=>v({option:a,index:l},s),onMouseleave:s=>j({option:a,index:l},s),onClick:s=>n({option:a,index:l},s)},[e("input",{type:"radio",name:"segmented"},null),e("div",{class:"pure-segmented-item-label"},[a.icon&&!L(a.label)?e("span",{class:"pure-segmented-item-icon",style:{marginRight:a.label?"6px":0}},[b(_(a.icon))]):null,a.label?L(a.label)?b(a.label):e("span",null,[a.label]):null])]));return()=>e("div",{class:"pure-segmented"},[e("div",{class:"pure-segmented-group"},[e("div",{class:"pure-segmented-item-selected",style:{width:`${p.value}px`,transform:`translateX(${f.value}px)`,display:g.value?"block":"none"}},null),V()])])}}),m=W(X),Y=u("div",{class:"card-header"},[u("span",{class:"font-medium"},"分段控制器")],-1),F=u("p",{class:"mb-2"},"基础用法",-1),H=u("p",{class:"mb-2"},"默认选中和禁用",-1),O=u("p",{class:"mb-2"},"设置图标",-1),q=u("p",{class:"mb-2"},"只设置图标",-1),z=u("p",{class:"mb-2"},"自定义渲染",-1),G=u("p",{class:"mb-2"},"change事件",-1),U=R({name:"Segmented",__name:"index",setup(w){const y=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3},{label:"周四",value:4},{label:"周五",value:5}],p=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3,disabled:!0},{label:"周四",value:4},{label:"周五",value:5,disabled:!0}],f=[{label:"周一",value:1,icon:x},{label:"周二",value:2},{label:"周三",value:3,icon:"terminalWindowLine"},{label:"周四",value:4,icon:"streamline-emojis:airplane"},{label:"周五",value:5,icon:"streamline-emojis:2"}],h=[{value:1,icon:x},{value:2,icon:"terminalWindowLine"},{value:3,icon:"streamline-emojis:cow-face"},{value:4,icon:"streamline-emojis:airplane"},{value:5,icon:"streamline-emojis:2"}],g=[{label:()=>e("div",null,[b(_(x),{class:"m-auto w-[20px] h-[20px]"}),e("p",null,[C("周一")])]),value:1},{label:()=>e("div",null,[b(_("terminalWindowLine"),{class:"m-auto w-[20px] h-[20px]"}),e("p",null,[C("周二")])]),value:2},{label:()=>e("div",null,[b(_("streamline-emojis:cow-face"),{class:"m-auto w-[20px] h-[20px]"}),e("p",null,[C("周三")])]),value:3}],o=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3}];function c({index:r,option:t}){const{label:n,value:v}=t;D(`当前选中项索引为:${r},名字为${n},值为${v}`,{type:"success"})}return(r,t)=>{const n=k("el-divider"),v=k("el-card");return E(),A(v,{shadow:"never"},{header:I(()=>[Y]),default:I(()=>[F,e(d(m),{options:y}),e(n),H,e(d(m),{options:p,defaultValue:2}),e(n),O,e(d(m),{options:f}),e(n),q,e(d(m),{options:h}),e(n),z,e(d(m),{options:g}),e(n),G,e(d(m),{options:o,onChange:c}),e(n)]),_:1})}}});export{U as default};