짧은 대답 : 이것은 Custom Directives로 해야합니다 .
여기에도 이것을 말하는 훌륭한 답변이 많이 있지만 내가 본 대부분의 답변은 외부 클릭을 광범위하게 사용하기 시작할 때 (특히 계층화되거나 여러 제외가있는 경우) 분해됩니다. 나는 기사를 썼다Custom Directives의 뉘앙스와 구체적으로 이것의 구현에 대해 이야기하는 매체에 를 . 모든 엣지 케이스를 포함하지는 않지만 내가 생각한 모든 것을 다룹니다.
이렇게하면 여러 바인딩, 여러 수준의 기타 요소 제외가 고려되며 처리기가 "비즈니스 논리"만 관리 할 수 있습니다.
여기에 적어도 정의 부분에 대한 코드가 있습니다. 전체 설명은 기사를 확인하십시오.
var handleOutsideClick={}
const OutsideClick = {
// this directive is run on the bind and unbind hooks
bind (el, binding, vnode) {
// Define the function to be called on click, filter the excludes and call the handler
handleOutsideClick[el.id] = e => {
e.stopPropagation()
// extract the handler and exclude from the binding value
const { handler, exclude } = binding.value
// set variable to keep track of if the clicked element is in the exclude list
let clickedOnExcludedEl = false
// if the target element has no classes, it won't be in the exclude list skip the check
if (e.target._prevClass !== undefined) {
// for each exclude name check if it matches any of the target element's classes
for (const className of exclude) {
clickedOnExcludedEl = e.target._prevClass.includes(className)
if (clickedOnExcludedEl) {
break // once we have found one match, stop looking
}
}
}
// don't call the handler if our directive element contains the target element
// or if the element was in the exclude list
if (!(el.contains(e.target) || clickedOnExcludedEl)) {
handler()
}
}
// Register our outsideClick handler on the click/touchstart listeners
document.addEventListener('click', handleOutsideClick[el.id])
document.addEventListener('touchstart', handleOutsideClick[el.id])
document.onkeydown = e => {
//this is an option but may not work right with multiple handlers
if (e.keyCode === 27) {
// TODO: there are minor issues when escape is clicked right after open keeping the old target
handleOutsideClick[el.id](e)
}
}
},
unbind () {
// If the element that has v-outside-click is removed, unbind it from listeners
document.removeEventListener('click', handleOutsideClick[el.id])
document.removeEventListener('touchstart', handleOutsideClick[el.id])
document.onkeydown = null //Note that this may not work with multiple listeners
}
}
export default OutsideClick