OutClick 구현을 위한 Vue 명령의 예
다음은 두 가지 흔히 볼 수 있는 모드 프레임의 실현 방식이다
방안 1: 기본 클릭은 거품을 막는 단계에 놓여 있습니다. 내용 영역에 클릭을 추가하면 거품을 막을 수 있습니다.
<div class="cover" @click="close">
<!-- -->
<div class="content" @click.stop>modal content</div>
</div>
시나리오 2: 터치한 DOM이 컨텐츠 영역에 있는지 코드를 통해 판단
<div class="cover" @click="handleClick">
<div class="content" ref="content">modal content</div>
</div>
handleClick (e) {
let clickOut = true
let temp = e.target
do {
if (temp === this.$refs.content) {
clickOut = false
break
}
temp = temp.parentElement
} while (temp !== document.documentElement)
console.log(clickOut)
}
명령 실행위의 코드는 전체 화면의 모드 상자를 눌러 외부 구역을 닫는 것을 해결할 수 있습니다.그러나 팝업의 팝업도 있다. 이런 팝업의 외부 구역은 본 구성 요소에 있지 않다. 이런 팝업을 실현하려면 외부 구역을 닫고 위의 방식을 사용해도 된다. mounted 단계에서handle Click 이벤트를 body에 추가하고 before Destroy에서 body의 클릭 시간을 풀면 된다.
만약 여러 구성 요소가 이 클릭 외부 영역이 닫히는 효과를 실현해야 한다면 Vue 명령을 통해 봉인할 수 있습니다
실현 탄창
<div class="cover">
<div class="content" v-out-click="close">modal content</div>
</div>
팝업 실행
<button @click="popIsShow = true"> </button>
<div class="pop" v-if="popIsShow" v-out-click="closePop">I'm pop text</div>
명령 코드의 구체적인 내용은 다음과 같다.한 가지 괴로운 것은 지령에 변수를 저장할 곳이 없어서 어쩔 수 없이 이 변수들을 DOM에 넣었다는 것이다.그리고 사용할 때 v-
접두사를 붙여야 하며, 지령의 이름은 끼지 않아도 된다v-
import outClick from './directive/out-click.js'
Vue.directive(outClick.name, outClick)
const KEY_OUT = '_out_click'
const KEY_OUT_EVENT = '_out_click_event'
const KEY_IN = '_in_click'
const KEY_FLAG = '_in_out_flag'
function removeEvent(el, binding, vnode) {
el.removeEventListener('click', el[KEY_IN], false)
window.removeEventListener('click', el[KEY_OUT], false)
delete el[KEY_IN]
delete el[KEY_OUT]
delete el[KEY_OUT_EVENT]
delete el[KEY_FLAG]
}
function initEvent(el, binding, vnode) {
// setTimeout 0: , origin click
setTimeout(() => {
el[KEY_OUT] = () => outClick(el)
el[KEY_IN] = () => inClick(el)
el[KEY_OUT_EVENT] = binding.value
el.addEventListener('click', el[KEY_IN], false)
window.addEventListener('click', el[KEY_OUT], false)
}, 0)
}
function inClick(el) {
//
// , click
el[KEY_FLAG] = '1'
}
function outClick(el) {
if (!el[KEY_FLAG] && el[KEY_OUT_EVENT]) {
el[KEY_OUT_EVENT]()
}
delete el[KEY_FLAG]
}
export default {
name: 'out-click',
update: (el, binding, vnode) => {
if (binding.value === binding.oldValue) {
return
}
removeEvent(el, binding, vnode)
initEvent(el, binding, vnode)
},
bind: initEvent,
unbind: removeEvent
}
이상은 바로 Vue 명령이 OutClick을 실현하는 예시의 상세한 내용입니다. 더 많은 Vue 명령이 OutClick을 실현하는 것에 관한 자료는 저희 다른 관련 글을 주목해 주십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.