子组件:
<template> <div> <input class="form-control autoSelect" type="text" @mouseup="mouse" @keyup="loadOptions" v-model="selectContent" /> <div class="autoSelectDiv" isHover="false" v-show="isShow"> <ul> <li v-for="dataItem in selectList" @click="selectItem(dataItem)">{{dataItem.vName}}</li> </ul> </div> </div> </template>
<script type="text/javascript"> export default{ name:'autoSelect', props:{
//父级传过来的默认被选中的值
name:{ type:String, default:'' }, url:{ type: String, default:'' } }, data(){ return{ returnContent:{selectedId:'',flag:0,selectContent:''},//我多个地方调用了下拉菜单,所以加了一个flag区分 selectList:[], isShow:false } }, mounted(){ //点击其他地方,隐藏下拉菜单 this.bodyLister=(e)=>{ if(this.isShow==true){ this.isShow=false; } } document.addEventListener('click',this.bodyLister); }, watch:{ name:{ handler:function (newValue, oldValue) { this.returnContent.selectContent=newValue; } } }, methods:{ selectItem(data){ this.returnContent.selectedId=data.vCode; this.returnContent.selectContent=data.vName; this.isShow=false; this.$emit('getAutoSelectResult',this.returnContent); }, mouse(){ //点击输入框时就发送请求 if(this.selectContent==""){ this.loadOptions(); } }, loadOptions(){ var _this=this;var parameter={}; switch(_this.url){ case 'url1': parameter['param1']='要传的参数1'; this.returnContent.flag=1; break; case 'url2': parameter['param2']='要传的参数2'; this.returnContent.flag=2; break; } parameter['name']=this.returnContent.selectContent; //请求接口去吧 doRequest(url,parameter,function(result){ for(var i=0;i<result.length;i++){ _this.selectList.push({vCode:obj[i].value,vName:obj[i].name}); } _this.isShow=true; }) } } }
父组件:
<autoSelect :url="要请求的url" :name="要默认显示的值" @getAutoSelectResult="listenAutoSelectResult"></autoSelect>
子组件: