1 |
- import{av as e,_ as a,a2 as l,b as n,h as c,d as o,o as t,p as s,w as r,f as i,B as u,aq as h,k as d,t as f,v as m,i as p,Y as b,C as y,G as C}from"./index-2PZN6pGH.js";import{_}from"./uni-card.CpdfOoXJ.js";import{_ as V}from"./uni-section.BISPxi99.js";const x={en:{"uni-search-bar.cancel":"cancel","uni-search-bar.placeholder":"Search enter content"},"zh-Hans":{"uni-search-bar.cancel":"cancel","uni-search-bar.placeholder":"请输入搜索内容"},"zh-Hant":{"uni-search-bar.cancel":"cancel","uni-search-bar.placeholder":"請輸入搜索內容"}},{t:B}=e(x);const w=a({name:"UniSearchBar",emits:["input","update:modelValue","clear","cancel","confirm","blur","focus"],props:{placeholder:{type:String,default:""},radius:{type:[Number,String],default:5},clearButton:{type:String,default:"auto"},cancelButton:{type:String,default:"auto"},cancelText:{type:String,default:"取消"},bgColor:{type:String,default:"#F8F8F8"},maxlength:{type:[Number,String],default:100},value:{type:[Number,String],default:""},modelValue:{type:[Number,String],default:""},focus:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},data:()=>({show:!1,showSync:!1,searchVal:""}),computed:{cancelTextI18n(){return this.cancelText||B("uni-search-bar.cancel")},placeholderText(){return this.placeholder||B("uni-search-bar.placeholder")}},watch:{modelValue:{immediate:!0,handler(e){this.searchVal=e,e&&(this.show=!0)}},focus:{immediate:!0,handler(e){if(e){if(this.readonly)return;this.show=!0,this.$nextTick((()=>{this.showSync=!0}))}}},searchVal(e,a){this.$emit("input",e),this.$emit("update:modelValue",e)}},methods:{searchClick(){this.readonly||this.show||(this.show=!0,this.$nextTick((()=>{this.showSync=!0})))},clear(){this.$emit("clear",{value:this.searchVal}),this.searchVal=""},cancel(){this.readonly||(this.$emit("cancel",{value:this.searchVal}),this.searchVal="",this.show=!1,this.showSync=!1,l())},confirm(){l(),this.$emit("confirm",{value:this.searchVal})},blur(){l(),this.$emit("blur",{value:this.searchVal})},emitFocus(e){this.$emit("focus",e.detail)}}},[["render",function(e,a,l,C,_,V){const x=n(o("uni-icons"),c),B=p,w=b,g=y;return t(),s(B,{class:"uni-searchbar"},{default:r((()=>[i(B,{style:u({borderRadius:l.radius+"px",backgroundColor:l.bgColor}),class:"uni-searchbar__box",onClick:V.searchClick},{default:r((()=>[i(B,{class:"uni-searchbar__box-icon-search"},{default:r((()=>[h(e.$slots,"searchIcon",{},(()=>[i(x,{color:"#c0c4cc",size:"18",type:"search"})]),!0)])),_:3}),_.show||_.searchVal?(t(),s(w,{key:0,focus:_.showSync,disabled:l.readonly,placeholder:V.placeholderText,maxlength:l.maxlength,class:"uni-searchbar__box-search-input","confirm-type":"search",type:"text",modelValue:_.searchVal,"onUpdate:modelValue":a[0]||(a[0]=e=>_.searchVal=e),onConfirm:V.confirm,onBlur:V.blur,onFocus:V.emitFocus},null,8,["focus","disabled","placeholder","maxlength","modelValue","onConfirm","onBlur","onFocus"])):(t(),s(g,{key:1,class:"uni-searchbar__text-placeholder"},{default:r((()=>[d(f(l.placeholder),1)])),_:1})),_.show&&("always"===l.clearButton||"auto"===l.clearButton&&""!==_.searchVal)&&!l.readonly?(t(),s(B,{key:2,class:"uni-searchbar__box-icon-clear",onClick:V.clear},{default:r((()=>[h(e.$slots,"clearIcon",{},(()=>[i(x,{color:"#c0c4cc",size:"20",type:"clear"})]),!0)])),_:3},8,["onClick"])):m("",!0)])),_:3},8,["style","onClick"]),"always"===l.cancelButton||_.show&&"auto"===l.cancelButton?(t(),s(g,{key:0,onClick:V.cancel,class:"uni-searchbar__cancel"},{default:r((()=>[d(f(V.cancelTextI18n),1)])),_:1},8,["onClick"])):m("",!0)])),_:3})}],["__scopeId","data-v-298b95e8"]]);const g=a({data:()=>({searchValue:"123123"}),methods:{search(e){C({title:"搜索:"+e.value,icon:"none"})},input(e){console.log("----input:",e)},clear(e){C({title:"clear事件,清除值为:"+e.value,icon:"none"})},blur(e){C({title:"blur事件,输入值为:"+e.value,icon:"none"})},focus(e){C({title:"focus事件,输出值为:"+e.value,icon:"none"})},cancel(e){C({title:"点击取消,输入值为:"+e.value,icon:"none"})}},onBackPress(){}},[["render",function(e,a,l,u,h,m){const b=y,C=n(o("uni-card"),_),x=n(o("uni-search-bar"),w),B=p,g=n(o("uni-section"),V),k=n(o("uni-icons"),c);return t(),s(B,null,{default:r((()=>[i(C,{"is-shadow":!1,"is-full":""},{default:r((()=>[i(b,{class:"uni-h6"},{default:r((()=>[d("搜索栏组件,通常用于搜索商品、文章等。")])),_:1})])),_:1}),i(g,{title:"基本用法",type:"line"},{default:r((()=>[i(x,{onConfirm:m.search,focus:!0,modelValue:h.searchValue,"onUpdate:modelValue":a[0]||(a[0]=e=>h.searchValue=e),onBlur:m.blur,onFocus:m.focus,onInput:m.input,onCancel:m.cancel,onClear:m.clear},null,8,["onConfirm","modelValue","onBlur","onFocus","onInput","onCancel","onClear"]),i(B,{class:"search-result"},{default:r((()=>[i(b,{class:"search-result-text"},{default:r((()=>[d("当前输入为:"+f(h.searchValue),1)])),_:1})])),_:1})])),_:1}),i(g,{title:"自定义样式",subTitle:"使用 bgColor 属性自定义背景色",type:"line"},{default:r((()=>[i(x,{placeholder:"自定义背景色",bgColor:"#EEEEEE",onConfirm:m.search},null,8,["onConfirm"])])),_:1}),i(g,{title:"只读样式",subTitle:"使用 readonly 使搜索框只读",type:"line"},{default:r((()=>[i(x,{readonly:"",placeholder:"自定义背景色",onConfirm:m.search},null,8,["onConfirm"])])),_:1}),i(g,{title:"自定义icon",type:"line"},{default:r((()=>[i(x,{placeholder:"自定义searchIcon",onConfirm:m.search,onCancel:m.cancel,"cancel-text":"cancel"},{default:r((()=>[i(k,{slot:"searchIcon",color:"#999999",size:"18",type:"home"})])),_:1},8,["onConfirm","onCancel"])])),_:1}),i(g,{title:"控制清除/取消按钮",subTitle:"使用 clearButton 属性设置清除按钮",type:"line"},{default:r((()=>[i(x,{radius:"5",placeholder:"一直显示",clearButton:"always",cancelButton:"always",onConfirm:m.search,onCancel:m.cancel},null,8,["onConfirm","onCancel"]),i(x,{class:"uni-mt-10",radius:"5",placeholder:"自动显示隐藏",clearButton:"auto",cancelButton:"none",onConfirm:m.search},null,8,["onConfirm"]),i(x,{class:"uni-mt-10",radius:"100",placeholder:"一直不显示",clearButton:"none",cancelButton:"none",onConfirm:m.search},null,8,["onConfirm"])])),_:1})])),_:1})}],["__scopeId","data-v-8e65f914"]]);export{g as default};
|