Question

本质上，我希望我的Vue实例响应对上载缩略图的单击。

我正在使用FineUploader Vue package和每个文档的模板布局（请参阅问题结尾）。上传图像后，将输出如下所示的树：

<Root>
   <Gallery>
      <Thumbnail>
    </Gallery>
</Root>

从jQuery的背景来看，鉴于缩略图模板已由包定义，因此我真的不知道实现此操作的“正确”方法，因此我不会创建自己的缩略图模板。我知道我可以访问这样的元素：

let thumb = this.$el.querySelector('.vue-fine-uploader-thumbnail');

也许是一个听众

 thumb.addEventListener('click', function() {
       alert('I got clicked');
   });

但是要处理正在重新渲染的Vue实例，等等。我不熟悉。

Vue模板：

<template>
  <Gallery :uploader="uploader" />
</template>

<script>
  import FineUploaderTraditional from 'fine-uploader-wrappers'
  import Gallery from 'vue-fineuploader/gallery'

  export default {
    components: {
      Gallery
    },
    data () {
      const uploader = new FineUploaderTraditional({
        options: {/*snip*/}
      })

      return {
        uploader
      }
    }
  }
</script>

Answer 1

为了响应点击事件，您可以将v-on:click（或缩写为@click）添加到所需的任何标签。

如果嵌套的元素响应click事件，则您可能会遇到对孩子的点击触发父母点击事件的情况。为防止这种情况，请改为添加@click.stop，以免触发父母点击。

因此，您将获得以下好处：

<Gallery @click="myFunction" />

以编程方式响应对Vue元素的点击

1 个答案: