mirror of
https://git-qiuchenly.yltfspace.com/QiuChenly/corepatch
synced 2025-11-25 05:40:27 +08:00
11 lines
2.5 KiB
JavaScript
11 lines
2.5 KiB
JavaScript
import{d as e,r as l,c as o,w as n,o as a,i as t,a as s,e as i,l as c,n as d,m as r,z as u,p as v,q as p,b as w,t as m,v as f,F as h,B as k,T as E,k as L,h as _}from"./CdD4XvnD.js"
|
|
import{_ as g,a as x}from"./BaSQ3xJt.js"
|
|
const y={class:"select-selected"},C=["onClick"],b=x(e({__name:"CustomSelect",props:{modelValue:{},options:{},placeholder:{default:"请选择"}},emits:["update:modelValue"],setup(e,{emit:x}){const b=e,V=x,z=l(!1),H=l(null),R=l(null),$=l({top:"0px",left:"0px",width:"200px"}),j=o(()=>b.options.find(e=>e.value===b.modelValue)||null),B=()=>{z.value&&H.value&&L(()=>{const e=H.value.getBoundingClientRect(),l=48*b.options.length+16,o=window.innerHeight-e.bottom,n=e.top
|
|
let a=e.bottom+8,t=e.left,s=e.width
|
|
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),$.value={top:`${a}px`,left:`${t}px`,width:`${s}px`}})},W=()=>{z.value=!z.value,z.value&&B()},q=e=>{const l=e.target
|
|
H.value&&H.value.contains(l)||R.value&&R.value.contains(l)||(z.value=!1)}
|
|
return n(z,e=>{e?(B(),window.addEventListener("scroll",B,!0),window.addEventListener("resize",B)):(window.removeEventListener("scroll",B,!0),window.removeEventListener("resize",B))}),a(()=>{document.addEventListener("click",q)}),t(()=>{document.removeEventListener("click",q),window.removeEventListener("scroll",B,!0),window.removeEventListener("resize",B)}),(l,o)=>{var n,a
|
|
return _(),s("div",{class:"custom-select-wrapper",ref_key:"wrapperRef",ref:H},[i("div",{class:d(["custom-select",{open:z.value}]),onClick:W},[i("div",y,[r(g,{icon:(null==(n=j.value)?void 0:n.icon)||"",class:"select-icon"},null,8,["icon"]),i("span",null,u((null==(a=j.value)?void 0:a.label)||e.placeholder),1),r(g,{icon:"fluent-color:chevron-down-24",class:d(["select-arrow",{rotated:z.value}])},null,8,["class"])])],2),(_(),c(E,{to:"body"},[r(v,{name:"dropdown-fade"},{default:p(()=>[z.value?(_(),s("div",{key:0,ref_key:"dropdownRef",ref:R,class:"select-dropdown",style:f($.value),onClick:o[0]||(o[0]=m(()=>{},["stop"]))},[(_(!0),s(h,null,k(e.options,l=>(_(),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)
|
|
var o}},[r(g,{icon:l.icon,class:"option-icon"},null,8,["icon"]),i("span",null,u(l.label),1),e.modelValue===l.value?(_(),c(g,{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}
|