vue组件---搜索框

时间：2023-03-31 14:26:44 vue.js

基本形式高级搜索搜索补全组件基本代码Vue.component('ym-search',{template:`搜索清除折叠

搜索高级搜索

{{item.name}}:{{item.value}}

展开`,data(){return{searchHeight:'52px',//搜索框默认高度为52showHighBtn:false,//是否显示“高级搜索”按钮hideBtn:false,//隐藏“搜索”按钮和“高级搜索”按钮showResult:false,//搜索完成后是否显示搜索结果}},props:{//搜索元素个数itemNum:{type:Number,default:1},//搜索后要显示的结果集results:Array},watch:{//页面初始化resu时有些条件需要默认lts(val){this.$nextTick(()=>{if((val.length>0)&&this.showHighBtn){this.showResult=true}})}},mounted(){//根据搜索框和搜索元素的宽度，计算是否显示“高级搜索”按钮this.$nextTick(()=>{letwrapW=+window.getComputedStyle(this.$refs.searchWrap).width.replace('px',''),itemW=322,btnW=180,n=Math.floor((wrapW-btnW)/itemW)if(this.itemNum>n){this.showHighBtn=trueif(this.results.length>0)this.showResult=true}})},methods:{//ClearcleanAll(){this.$emit('clear')},//搜索toSearch(tag){this.$emit('search'）这。$nextTick(()=>{//如果是高级中的搜索按钮，点击显示搜索内容if(+tag===1){如果(this.results.length>0){this.showResult=true}else{this.searchHeight='52px'this.hideBtn=false}}})},showSearch(){this.showResult=falseif(this.results.length>0){this.searchHeight='auto'this.hideBtn=true}},//显示高级搜索内容toHighSearch(){this.searchHeight='auto'this.hideBtn=true},//关闭slideUp(){if(this.results.length>0){this.showResult=true}else{this.searchHeight='52px'this.hideBtn=false}}}})同时全局混入Vue也写了。mixin({data(){return{//所有搜索属性v-modelcollectionsearchData:{},//搜索结果--forDisplaysearchResults:[],//搜索属性请求数据集requestData:{},}},methods:{//toSearchBefore和toSearchAfter方法可以在调用页面自定义toSearch(){if(!!this.toSearchBefore){this.toSearchBefore.apply(this,arguments)}let{results,request}=packageRequestAndResults(this.searchData)this.searchResults=resultsthis.requestData=requestthis.pageChange(1)if(!!this.toSearchAfter){this.toSearchAfter.apply(this,arguments)}},clearSearch(){this.searchData={}this.requestData={}this.searchResults=[]}}})上面的代码涉及到一个packageRequestAndResults方法//根据searchBaseData和searchData组件显示结果和请求数据requestfunctionpackageRequestAndResults(searchData){letresults=[]//搜索结果显示letrequestst={}//用于请求接口数据Object.keys(searchData).forEach(k=>{letstring_empty=Object.prototype.toString.apply(searchData[k])==='[objectString]'&&searchData[k]==='',array_empty=Object.prototype.toString.apply(searchData[k])==='[objectArray]'&&searchData[k].length===0if(!string_empty&&!array_empty&&!!searchData[k]){letobj=searchBaseData[k],name=''if(!!obj){if(obj.type==='input'){name=searchData[k]请求[k]=searchData[k]}elseif(obj.type==='date'){name=searchData[k][0]+'~'+searchData[k][1]request['START'+k]=searchData[k][0]request['END'+k]=searchData[k][1]}else{name=obj.getName(searchData[k])请求[k]=obj.getVal(searchData[k])}results.push({name:obj.name,value:name})}}})return{results,request}}上面有个searchBaseData，接下来的页面会使用

微信昵称

关注时间

身份

item-num必须和搜索项数一致，绑定结果，clear，search不需要重命名，因为上面的mixins都是defined，除非不能满足要求，可重定义v-model的格式必须是searchData.xxx，其中xxx是请求参数的key，如果是日期格式，key是STARTSUBSCRIBETIME和ENDSUBSCRIBETIME，START和END需要去掉，如果没有，下面再说重要链接，必须声明一个searchBaseData对象，包括每个搜索itemletsearchBaseData={//如果显示和值一致，可以直接指定type=inputKEYWORD_SEARCH:{name:'WeChatnickname',type:'input'},//如果requestkey以'START'和'END'开头，可以直接指定type=date，如果不是，则使用followingmethodSUBSCRIBETIME:{name:'关注时间',type:'date'},//如果显示和值不规则，可以指定getName和getValFCUSTOMERSTATUS:{name:'identity',getName(val){letarr=['potential','owner','follow','member']returnarr[+val]},getVal(val){返回val}},}代码在这里结束

上一篇：vuewebpackversioniniterror

下一篇：【vue3源码】十三、认识Block

vue组件---搜索框相关文章