programing

VueJ: @click.disclick.stop = " " 가능합니까?

copyandpastes 2022. 7. 4. 23:35
반응형

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.nativemodal-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

반응형