2 lines
1.5 KiB
JavaScript
2 lines
1.5 KiB
JavaScript
import{a as e,b as l,e as a,i as n,j as o,k as t,m as s,n as u,F as i,z as d,q as c,aw as r,l as p,p as m,au as v}from"./index-71a5bbac.js";function f(a){const{api:n}=a,o=e(!1),t=e([]),s=e("");return l((()=>{o.value=!0,t.value=[],n().then((e=>{t.value=e.data})).finally((()=>{o.value=!1}))})),{loading:o,options:t,value:s}}const h={code:0,data:[{label:"苹果",value:1},{label:"香蕉",value:2},{label:"橘子",value:3,disabled:!0}],message:"获取 Select 数据成功"};function b(){return new Promise(((e,l)=>{setTimeout((()=>{Math.random()<.8?e(h):l(new Error("接口发生错误"))}),2e3)}))}const g={class:"app-container"},V=p("h4",null,"该示例是演示：通过 hook 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件",-1),S=p("h5",null,"Select 示例",-1),k=p("h5",null,"Select V2 示例（如果数据量过多，可以选择该组件）",-1),w=a({__name:"use-fetch-select",setup(e){const{loading:l,options:a,value:p}=f({api:b});return(e,f)=>{const h=n("el-option"),b=n("el-select"),w=n("el-select-v2");return o(),t("div",g,[V,S,s(b,{loading:c(l),modelValue:c(p),"onUpdate:modelValue":f[0]||(f[0]=e=>r(p)?p.value=e:null),filterable:""},{default:u((()=>[(o(!0),t(i,null,d(c(a),((e,l)=>(o(),m(h,v(e,{key:l,placeholder:"请选择"}),null,16)))),128))])),_:1},8,["loading","modelValue"]),k,s(w,{loading:c(l),modelValue:c(p),"onUpdate:modelValue":f[1]||(f[1]=e=>r(p)?p.value=e:null),options:c(a),filterable:"",placeholder:"请选择"},null,8,["loading","modelValue","options"])])}}});export{w as default};
|