반응형
VueJ: @click.disclick.stop = " " 가능합니까?
페이지에는 부모 컴포넌트와 함께 여러 개의 중첩된 컴포넌트가 있습니다.@click.native
실행.따라서 하위 구성 요소(부모 내부에 있음)가 차지하는 영역을 클릭하면 두 가지 모두(부모 및 모든 중첩된 자식)가 실행됩니다.
<products>
<product-details>
<slide-show>
<media-manager>
<modal-dialog>
<product-details>
<slide-show>
<media-manager>
<modal-dialog>
</products>
여러 제품 목록이 있고 modal 대화상자에 속한 "canvas"를 클릭해도 표시됩니다.@click.native
modal-dialog가 속한 product-dialog에서 실행됩니다.이런 거 있으면 좋을 것 같아요@click.native.stop="code"
이게 가능합니까?
지금 당장 해야 할 일이 있어
@click.native="clickHandler"
and then
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
코드
<template>
<div class="media-manager">
<div v-if="!getMedia">
<h1>When you're ready please upload a new image</h1>
<a href="#"
class="btn btn--diagonal btn--orange"
@click="upload=true">Upload Here</a>
</div>
<img :src="getMedia.media_url"
@click="upload=true"
v-if="getMedia">
<br>
<a class="arrow-btn"
@click="upload=true"
v-if="getMedia">Add more images</a>
<!-- use the modal component, pass in the prop -->
<ModalDialog
v-if="upload"
@click.native="clickHandler"
@close="upload=false">
<h3 slot="header">Upload Images</h3>
<p slot="body">Hello World</p>
</ModalDialog>
</div>
</template>
<script>
import ModalDialog from '@/components/common/ModalDialog';
export default {
components: {
ModalDialog,
},
props: {
files: {
default: () => [],
type: Array,
},
},
data() {
return {
upload: false,
}
},
computed: {
/**
* Obtain single image from the media array
*/
getMedia() {
const [
media,
] = this.files;
return media;
},
},
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
}
};
</script>
<style lang="scss" scoped>
.media-manager img {
max-width: 100%;
height: auto;
}
a {
cursor: pointer;
}
</style>
매뉴얼은 확인하셨나요?https://vuejs.org/v2/guide/events.html
있어@click.stop=""
또는@click.stop.prevent=""
그래서 이걸 쓸 필요가 없어요.
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
}
Vue에서는 수식자를 연결할 수 있습니다.따라서 다음과 같은 수식어를 자유롭게 사용할 수 있습니다.
@click.native.prevent
또는@click.stop.prevent
<my-component @click.native.prevent="doSomething"></my-component>
이벤트 확인
저도 같은 문제가 있었어요.다음을 사용하여 문제를 해결했습니다.
<MyComponent @click.native.prevent="myFunction(params)" />
언급URL : https://stackoverflow.com/questions/49041779/vuejs-click-native-stop-possible
반응형
'programing' 카테고리의 다른 글
Vuex 다중 패싱 어레이 또는 기타 방법 (0) | 2022.07.04 |
---|---|
vuejs 2 프로포트를 변환하지 않도록 합니다. (0) | 2022.07.04 |
JavaScript는 왜 JavaScript라고 불리는가? 자바와는 아무런 관련이 없는데? (0) | 2022.07.04 |
Vue DOM이 계산된 속성에 반응하지 않음 (0) | 2022.07.04 |
vuejs 구성 요소에서 작업을 디스패치할 때 vuex 알 수 없는 작업 유형 (0) | 2022.07.04 |