2025-11-14 04:00:32 +08:00
|
|
|
import{d as e,r as l,f as o,w as n,o as a,a as t,k as s,m as i,c,b as d,g as r,x as u,i as v,j as p,l as w,t as m,q as f,F as k,z as h,T as g,n as x,e as E}from"./CD7TqNEc.js"
|
|
|
|
|
import{_ as L,a as _}from"./DTEPVF5R.js"
|
2025-11-13 18:28:21 +08:00
|
|
|
const y={class:"select-selected"},C=["onClick"],b=_(e({__name:"CustomSelect",props:{modelValue:{},options:{},placeholder:{default:"请选择"}},emits:["update:modelValue"],setup(e,{emit:_}){const b=e,V=_,z=l(!1),j=l(null),H=l(null),R=l({top:"0px",left:"0px",width:"200px"}),$=o(()=>b.options.find(e=>e.value===b.modelValue)||null),W=()=>{z.value&&j.value&&x(()=>{const e=j.value.getBoundingClientRect(),l=48*b.options.length+16,o=window.innerHeight-e.bottom,n=e.top
|
2025-11-13 03:02:01 +08:00
|
|
|
let a=e.bottom+8,t=e.left,s=e.width
|
2025-11-13 18:28:21 +08:00
|
|
|
o<l&&n>o&&(a=e.top-l-8),t+s>window.innerWidth&&(t=window.innerWidth-s-16),t<16&&(t=16),a<16&&(a=16),a+l>window.innerHeight-16&&(a=window.innerHeight-l-16),R.value={top:`${a}px`,left:`${t}px`,width:`${s}px`}})},q=()=>{z.value=!z.value,z.value&&W()},B=e=>{const l=e.target
|
|
|
|
|
j.value&&j.value.contains(l)||H.value&&H.value.contains(l)||(z.value=!1)}
|
|
|
|
|
return n(z,e=>{e?(W(),window.addEventListener("scroll",W,!0),window.addEventListener("resize",W)):(window.removeEventListener("scroll",W,!0),window.removeEventListener("resize",W))}),a(()=>{document.addEventListener("click",B)}),t(()=>{document.removeEventListener("click",B),window.removeEventListener("scroll",W,!0),window.removeEventListener("resize",W)}),(l,o)=>{var n,a
|
|
|
|
|
return E(),s("div",{class:"custom-select-wrapper",ref_key:"wrapperRef",ref:j},[i("div",{class:d(["custom-select",{open:z.value}]),onClick:q},[i("div",y,[r(L,{icon:(null==(n=$.value)?void 0:n.icon)||"",class:"select-icon"},null,8,["icon"]),i("span",null,u((null==(a=$.value)?void 0:a.label)||e.placeholder),1),r(L,{icon:"fluent-color:chevron-down-24",class:d(["select-arrow",{rotated:z.value}])},null,8,["class"])])],2),(E(),c(g,{to:"body"},[r(v,{name:"dropdown-fade"},{default:p(()=>[z.value?(E(),s("div",{key:0,ref_key:"dropdownRef",ref:H,class:"select-dropdown",style:f(R.value),onClick:o[0]||(o[0]=m(()=>{},["stop"]))},[(E(!0),s(k,null,h(e.options,l=>(E(),s("div",{key:l.value,class:d(["select-option",{active:e.modelValue===l.value}]),onClick:e=>{return o=l.value,V("update:modelValue",o),void(z.value=!1)
|
2025-11-13 03:02:01 +08:00
|
|
|
var o}},[r(L,{icon:l.icon,class:"option-icon"},null,8,["icon"]),i("span",null,u(l.label),1),e.modelValue===l.value?(E(),c(L,{key:0,icon:"fluent-color:checkmark-24",class:"option-check"})):w("",!0)],10,C))),128))],4)):w("",!0)]),_:1})]))],512)}}}),[["__scopeId","data-v-3ceed415"]])
|
|
|
|
|
export{b as C}
|