vue自定义下拉框组件

• 这次需求里面需要自定义下拉选择框，所以自己用vue写了个下拉选择框。
• 开发过程中主要解决的是点击其他空白地方，下拉框隐藏。 点击当前下拉框，其他下拉框隐藏

image.png

image.png

• 封装的组件 我设置接收 左边显示label名，placeholder内容，以及默认显示文本。然后就是下拉列表监听选择事件
  父组件

• 关于点击空白地方，隐藏下拉框。我在mounted之后document监听了click事件，因为组件上我都有一个私有的类名“_r_select_my_use”.所以通过类名可以判断是否是点击的组件。 在 beforeDestory的时候移除监听。

• 在点击当前组件的时候，隐藏其他组件的下拉框。我用到了一个全局的计数器 _active_select_index。 每次点击组件的时候，全局计数器加1 并赋值给当前组件。 然后点击事件冒泡到document上的委托绑定click事件，判断当前组件的计数器与全局计数器是不是一样，如果不一样证明不是当前组件，关闭下拉框
  子组件