vue中根据光标的显示和消失实现下拉列表

vue中根据光标的显示和消失实现下拉列表关键知识mousedown事件：mousedown的执行顺序大于blur事件HTML代码通过上面的代码生成了我们基本的下拉列表,接着是数据分析data:data(){return{search:'',//搜索框值state:false,//是否显示下拉列表isShowList:false,//判断是否点击content隐藏光标，或者点击空白隐藏光标}}，详细函数分析：//显示光标和丢失光标EventshowList(state){//state用于判断是否获取到光标事件或者不是转到光标事件if(state){this.state=state//显示下拉列表}else{if(this.isShowList){//this.isShowList用于判断下拉列表中的内容是否listisclicked//把this赋值.isShowList为false，这样点击空白区域可以再次触发lostcursor事件this.isShowList=false//让input一直有cursor事件this.$refs.search.focus()}else{this.state=state//隐藏下拉框}}},handleSearch(data){//数据搜索数据this.search=data//赋值this.isShowList=true//这是点击事件区分是否是内容区}详细过程点击input标签触发showList(true)方法，如果为true，直接执行this.state=state//显示下拉列表，点击drop的内容-down框触发handleSearch(data)方法。设置this.isShowList=true，将此标记为对下拉框内容的点击事件，不会隐藏下拉框，最后通过blur触发showList(false)。会根据this.isShowList判断是否隐藏下拉框。当this.isShowList为true时，执行this.isShowList=false，让this.isShowList回到原来的状态，让你可以点击空白区域，也可以隐藏下拉框，this.$refs.search.focus()允许输入再次获取光标事件，点击空白区域隐藏下拉框会触发丢失光标事件参考：https://www.jianshu.com/p/7d4...don不懂加我qq：1350488130