Есть кастомный
select
на Vue
На данный момент закрытие списков реализовано так:
выжимка кода// в mounted
el.addEventListener('click', function (e) {
e.stopPropagation() // благодаря этому "не всплыванию" все клики по селекту не закрывают его
document.addEventListener('click', it.close)
})
// в methods
close () {
this.opened = false
document.removeEventListener('click', this.close)
},
open () {
if (this.disabled) return false
this.opened = true
}
Но здесь возникает проблема: когда открываешь один
select
, а потом открываешь второй - событие не всплывает со второго и первый не закрывается, по итогу: оба селекта открыты.
Я думал насчет того, чтобы навешивать клик на документ, проходиться по все родителям e.target и узнавать, child ли это от
select
или нет, если нет - закрываем.
Но это, как мне кажется, довольно ресурсоемкий код и сам по себе громоздкий, поэтому я его откинул на этапе раздумий.
Как же тогда исполнить задумку?