Vue项目中如何使预查询的显示框隐藏

Vue项目中,某个组件中的预查询的List列表如何点击除它自己外任意地方使该列表隐藏?

https://img2.mukewang.com/5c21e56d00018dd308550430.jpg

代码如下:
1.数据绑定处:
https://img4.mukewang.com/5c21e57a0001134c08800056.jpg

2.事件绑定:

https://img3.mukewang.com/5c21e58a0001c19d10850042.jpg

https://img3.mukewang.com/5c21e59200011ced06030191.jpg

3.有的同学会说,将输入框设置失去焦点事件,,但是如图的列表显示,,想要点击选中列表的值,会是的input先失去焦点,,会照成无法选中列表值的情况发生,,,
4.各位路过的同学,瞅一眼啦


繁星coding
浏览 817回答 1
1回答

慕村9548890

我的项目mounted () {      /***       * 使得其点击之外的部分自动收起       */      document.addEventListener('click', (e) => {        if (!this.$el.contains(e.target)) {          this.reset()        }      })    }意思就是点击不在这个组件内的区域收起弹出框,当然你可以把this.$el改成一个ref来判断
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript