Question

我在页面上有几个嵌套组件，其父组件具有@click.native实现。因此，当我单击子组件占用的区域（居住在父级内部）时，执行单击操作（父级和所有嵌套子级），例如

<products>
   <product-details>
       <slide-show>
             <media-manager>
                  <modal-dialog>
   <product-details>
       <slide-show>
             <media-manager>
                  <modal-dialog>
 </products>

所以我有一个多个产品的列表，当我点击属于模态对话框的“画布”时 - 我也会对模态对话框所属的产品详细信息进行@click.native。像@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>

Answer 1

您查看了手册吗？ https://vuejs.org/v2/guide/events.html

有@click.stop=""或@click.stop.prevent=""

所以你不需要使用这个

methods: {
    clickHandler(e) {
      e.stopPropagation();
      console.log(e);
    }
  }

Answer 2

我有同样的问题。我使用以下方法解决了这个问题：

<MyComponent @click.native.prevent="myFunction(params)" />

Answer 3

在Vue中，修饰符可以被链接。因此，您可以自由使用如下修饰符：

class Main: def __init__(self): import pygame from pygame.math import Vector2 import os from Database.Player import Player import platform pygame.init() # file path file_path = os.path.dirname(os.path.abspath(__file__)) # changing driver if platform.system() == "Windows": os.environ["SDL_VIDEODRIVER"] = "directx" # screen vars screen = pygame.display.set_mode((800, 800), pygame.RESIZABLE) screen_info = pygame.display.Info() screen_size = Vector2(screen_info.current_w, screen_info.current_h) game_resolution = Vector2(800, 800) game_offset = Vector2(screen_size / 2 - game_resolution / 2) # class initializations player = Player((400, 0), file_path) # screen caption pygame.display.set_caption(f"reeeeeeeeeeeeeeeeeeeeeeeeeeeee") # clock clock = pygame.time.Clock() leave = False while not leave: pygame.display.set_caption(str(clock.get_fps())) # delta time delta_time = clock.get_time() / 1000 # key presses key = pygame.key.get_pressed() # event event = pygame.event.wait() if event.type == pygame.QUIT or key[pygame.K_DELETE]: leave = True elif event.type == pygame.VIDEORESIZE: game_offset = Vector2(Vector2(event.size) / 2 - game_resolution / 2) screen = pygame.display.set_mode(event.size, pygame.RESIZABLE) # update player.update(key, delta_time) player.draw(screen, game_offset) pygame.display.flip() screen.fill((255, 255, 255)) clock.tick(1000) pygame.display.quit() return if __name__ == "__main__": Main()或import pygame from pygame.math import Vector2 class Player(object): def __init__(self, start_pos, file_path): # visual self.image = pygame.Surface((20, 20)) # positional self.pos = start_pos self.rect = pygame.Rect(start_pos, self.image.get_size()) self.speed = Vector2(0) self.deceleration = 0.1 self.acceleration = Vector2(4000, 0) self.gravity = Vector2(0, 800) self.max_speed = Vector2(1000, 1000) self.jump_speed = Vector2(0, 500) # properties self.jump = True def draw(self, surface, game_offset): surface.blit(self.image, self.pos + game_offset) def update(self, key, delta_time): if key[pygame.K_a]: self.speed.x -= self.acceleration.x * delta_time if key[pygame.K_d]: self.speed.x += self.acceleration.x * delta_time if key[pygame.K_w] or key[pygame.K_SPACE] and self.jump: self.speed.y -= self.jump_speed.y self.speed.y += self.gravity.y * delta_time self.speed.x = max(-self.max_speed.x, min(self.speed.x, self.max_speed.x)) self.speed.y = max(-self.max_speed.y, min(self.speed.y, self.max_speed.y)) self.pos += self.speed * delta_time

@click.native.prevent

选中events

VueJS：@ click.native.stop =“”可能吗？

码

3 个答案: