mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
2 lines
4.7 KiB
JavaScript
2 lines
4.7 KiB
JavaScript
import{m as w}from"./message-6f31e976.js";import{d as f}from"./home-filled-05cc090c.js";import{u as v}from"./hooks-a12c1294.js";import{F as x,H as N,Y as C}from"./index-fa5d6b3f.js";const y={options:{type:Array,default:()=>[]},defaultValue:{type:Number,default:0}},E=Vue.defineComponent({name:"ReSegmented",props:y,emits:["change"],setup(b,{emit:p}){const d=Vue.ref(0),V=Vue.ref(0),{isDark:i}=x(),m=Vue.ref(!1),n=Vue.ref(-1),s=Vue.ref(""),o=Vue.getCurrentInstance(),u=Vue.ref(b.defaultValue);function t({option:e,index:a},l){e.disabled||(l.preventDefault(),u.value=a,s.value="",p("change",{index:a,option:e}))}function r({option:e,index:a},l){l.preventDefault(),n.value=a,e.disabled||u.value===a?s.value="":s.value=i.value?"#1f1f1f":"rgba(0, 0, 0, 0.06)"}function h(e,a){a.preventDefault(),n.value=-1}function g(e=u.value){Vue.nextTick(()=>{var l;const a=(l=o==null?void 0:o.proxy)==null?void 0:l.$refs[`labelRef${e}`];d.value=a.clientWidth,V.value=a.offsetLeft,m.value=!0})}Vue.watch(()=>u.value,e=>{Vue.nextTick(()=>{g(e)})},{deep:!0,immediate:!0});const _=()=>b.options.map((e,a)=>Vue.createVNode("label",{ref:`labelRef${a}`,class:["pure-segmented-item",(e==null?void 0:e.disabled)&&"pure-segmented-item-disabled"],style:{background:n.value===a?s.value:"",color:!e.disabled&&(u.value===a||n.value===a)?i.value?"rgba(255, 255, 255, 0.85)":"rgba(0,0,0,.88)":""},onMouseenter:l=>r({option:e,index:a},l),onMouseleave:l=>h({option:e,index:a},l),onClick:l=>t({option:e,index:a},l)},[Vue.createVNode("input",{type:"radio",name:"segmented"},null),Vue.createVNode("div",{class:"pure-segmented-item-label"},[e.icon&&!N(e.label)?Vue.createVNode("span",{class:"pure-segmented-item-icon",style:{marginRight:e.label?"6px":0}},[Vue.h(v(e.icon))]):null,e.label?N(e.label)?Vue.h(e.label):Vue.createVNode("span",null,[e.label]):null])]));return()=>Vue.createVNode("div",{class:"pure-segmented"},[Vue.createVNode("div",{class:"pure-segmented-group"},[Vue.createVNode("div",{class:"pure-segmented-item-selected",style:{width:`${d.value}px`,transform:`translateX(${V.value}px)`,display:m.value?"block":"none"}},null),_()])])}}),k=C(E),c=k,$=Vue.createElementVNode("div",{class:"card-header"},[Vue.createElementVNode("span",{class:"font-medium"},"分段控制器")],-1),I=Vue.createElementVNode("p",{class:"mb-2"},"基础用法",-1),L=Vue.createElementVNode("p",{class:"mb-2"},"默认选中和禁用",-1),R=Vue.createElementVNode("p",{class:"mb-2"},"设置图标",-1),j=Vue.createElementVNode("p",{class:"mb-2"},"只设置图标",-1),S=Vue.createElementVNode("p",{class:"mb-2"},"自定义渲染",-1),D=Vue.createElementVNode("p",{class:"mb-2"},"change事件",-1),A=Vue.defineComponent({name:"Segmented",__name:"index",setup(b){const p=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3},{label:"周四",value:4},{label:"周五",value:5}],d=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3,disabled:!0},{label:"周四",value:4},{label:"周五",value:5,disabled:!0}],V=[{label:"周一",value:1,icon:f},{label:"周二",value:2},{label:"周三",value:3,icon:"terminalWindowLine"},{label:"周四",value:4,icon:"streamline-emojis:airplane"},{label:"周五",value:5,icon:"streamline-emojis:2"}],i=[{value:1,icon:f},{value:2,icon:"terminalWindowLine"},{value:3,icon:"streamline-emojis:cow-face"},{value:4,icon:"streamline-emojis:airplane"},{value:5,icon:"streamline-emojis:2"}],m=[{label:()=>Vue.createVNode("div",null,[Vue.h(v(f),{class:"m-auto w-[20px] h-[20px]"}),Vue.createVNode("p",null,[Vue.createTextVNode("周一")])]),value:1},{label:()=>Vue.createVNode("div",null,[Vue.h(v("terminalWindowLine"),{class:"m-auto w-[20px] h-[20px]"}),Vue.createVNode("p",null,[Vue.createTextVNode("周二")])]),value:2},{label:()=>Vue.createVNode("div",null,[Vue.h(v("streamline-emojis:cow-face"),{class:"m-auto w-[20px] h-[20px]"}),Vue.createVNode("p",null,[Vue.createTextVNode("周三")])]),value:3}],n=[{label:"周一",value:1},{label:"周二",value:2},{label:"周三",value:3}];function s({index:o,option:u}){const{label:t,value:r}=u;w(`当前选中项索引为：${o}，名字为${t}，值为${r}`,{type:"success"})}return(o,u)=>{const t=Vue.resolveComponent("el-divider"),r=Vue.resolveComponent("el-card");return Vue.openBlock(),Vue.createBlock(r,{shadow:"never"},{header:Vue.withCtx(()=>[$]),default:Vue.withCtx(()=>[I,Vue.createVNode(Vue.unref(c),{options:p}),Vue.createVNode(t),L,Vue.createVNode(Vue.unref(c),{options:d,defaultValue:2}),Vue.createVNode(t),R,Vue.createVNode(Vue.unref(c),{options:V}),Vue.createVNode(t),j,Vue.createVNode(Vue.unref(c),{options:i}),Vue.createVNode(t),S,Vue.createVNode(Vue.unref(c),{options:m}),Vue.createVNode(t),D,Vue.createVNode(Vue.unref(c),{options:n,onChange:s}),Vue.createVNode(t)]),_:1})}}});export{A as default};
|