标签: vue-events

当我点击"阴影模式"div上的ESC按钮时,我期待"关闭"事件被触发,但它没有发生

vue 2.5.13,任何想法为什么？

<template>
  <div class="shadow-modal"
     @keyup.esc="$emit('close')">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">
                default header
              </slot>
            </div>
            <div class="modal-body">
              <slot name="body">
                default body
              </slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">
                <a href="#"
                   class="btn btn--diagonal btn--blue"
                   @click="$emit('close')">Cancel</a>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

该@drop监听器不会为我工作。它不会调用我告诉它调用的方法。

我想拖动芯片并能够将其放在另一个组件上，并执行一个功能，但是在放下芯片的时候，dropLink方法没有执行，所以我假设@drop事件没有发出。

控制台上不会显示任何错误。

其余事件运行良好，例如@dragstart.

这是我使用的组件的代码：

<template>
  <div
    @keydown="preventKey"
    @drop="dropLink"
  >
    <template
      v-if="!article.isIndex"
    >
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-chip
            small
            draggable
            class="float-left mt-2"
            v-on="on"
            @dragstart="dragChipToLinkToAnotherElement"
          >
            <v-icon x-small>
              mdi-vector-link
            </v-icon>
          </v-chip>
        </template>
        <span>Link</span>
      </v-tooltip>

      <v-chip-group
        class="mb-n2"
        show-arrows
      >
        <v-chip
          v-for="(lk, index) in links"
          :key="index"
          small
          outlined
          :class="{'ml-auto': index === 0}"
        >
          {{ lk.text }}
        </v-chip>
      </v-chip-group>
    </template>

    <div
      :id="article.id"
      spellcheck="false"
      @mouseup="mouseUp($event, article)"
      v-html="article.con"
    />
  </div>
</template>

<script>
export default {
  name: …

我正在努力处理事件传播。任务是在未保存数据的情况下防止单击其他任何内容。因此，左侧 div 包含一棵选项树。单击某个项目后，右侧 div 中会显示一个设置。我想警告用户，当他尝试单击设置 div 外部时，数据不会保存。

代码如下所示：

   <div class="row">
       <div class="col-sm-6">
           <tree
               :data="treeData">
               .. some tree data
           </tree>
       </div>
       <div class="col-sm-6">
               <div class="treeOptionEdit" v-if="showEditBox" v-click-outside.stop="checkIfSaved">

           ... setting input fields

vue-outside-events包用于检测div外部的点击。效果很好。问题是，这段代码没有做任何事情：

        checkIfSaved : function (event, el)
        {
            event.stopPropagation();
            event.preventDefault();
        },

无论如何，点击都会传播到父级。如果我将一个事件发送@click给父级，则所有点击都会触发该事件。

停止传播只能从父级到子级起作用吗？

我正在学习Vuejs event handling.
我认为,开发人员可以使用this.$on('event', handler)的js文件来处理'event'.

有一个例子.

<div id="mainapp" v-on:event="processEventFromView">
    <button type="button" v-on:click="emitEvent">
       Emit Event
    </button>
</div>

js文件

var app = new Vue({
  el:"#mainapp",
  data:{
    show:false
  },
  created:function(){
     this.$on('event', this.processEvent);
  },
  methods:{
      emitEvent:function(){
          this.$emit('event', {data:'mydata'});
      },
      processEvent(data){
         console.log('js', data);  //this is fired when clicking the button.
      },
      processEventFromView(data){
         console.log('view', data);  //this is not fired whenever.
      }      

   }
})

但是在示例中,单击按钮时仅触发processEvent附加的处理程序this.$on().v-onvs 之间有什么区别this.$on？
为什么v-on:event="processEventFromView"不随时打电话？ …

我正在阅读一些我想更新的代码：

<b-input :value="value" @input="$emit('input', $event)" ref="input" :maxlength="maxlength"/>

代表什么@input="$emit('input', $event)"？我在哪里以及如何监听输入事件？

我正在尝试创建一个具有拖动和单击事件的元素。我已经阅读并尝试了事件修饰符的组合。

但是，无论我尝试什么，当拖动停止时我都会听到一声点击。

请注意，在 MWE 中，这是在组件本身上完成的，但在我的实际应用程序中，我使用.native修改器来拖动组件

如何在不点击的情况下拖动？

成分Draggable：

<template>
  <div
    @pointerdown="handleDown"
    @pointerup="handleUp"
    @pointercancel="handleUp"
    @click="click = !click;"
    :style="style"
    ref="draggableRoot"
    class="draggable"
  >
    drag me!<br />
    am dragged? {{ drag }}<br />
    am clicked? {{ click }}<br />
  </div>
</template>
<script>
export default {
  computed: {
    style() {
      return {
        left: `${this.x}px`,
        top: `${this.y}px`
      };
    }
  },
  data() {
    return {
      x: 100,
      y: 100,
      left: 0,
      top: 0,
      drag: false,
      click: false
    };
  },
  methods: …

listener在 Vue 应用程序中，我在a 上粘贴了一个内容textarea，目的是当用户将数据粘贴到该字段时运行验证代码。当我记录粘贴事件时，我可以在控制台中看到粘贴到字段中的数据位于event -> target -> value. 但我似乎无法访问它event.target.value。我究竟做错了什么？

最小的例子：

<div id="app">
  <textarea name="myField" @paste="onPaste"></textarea>
  <p>Field name: {{ fieldName }}</p>
  <p>Pasted data: {{ pasted }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    fieldName: '',
    pasted: ''
  },
  methods: {
    onPaste(event){
        console.log(event)
        this.message = event.target.name
        this.paste = event.target.value
    }
  }
})

https://jsfiddle.net/feg8pcmv/

我有一个需要触发事件的 vue 可组合项。我天真地设置如下：

*// composable.js*
import { defineEmits } from "vue";

export default function useComposable() {
  // Vars
  let buffer = [];
  let lastKeyTime = Date.now();
  const emit = defineEmits(["updateState"]);

document.addEventListener("keydown", (e) => {
    // code
    emit("updateState", data);
   }

// *App.vue*
<template>
<uses-composables
    v-show="wirtleState.newGame"
    @updateState="initVars"
  ></uses-composables>
</template>
<script setup>
const initVars = (data) => {
//code here

}

// usesComposable.vue
<template>
  <button @click="resetBoard" class="reset-button">Play Again</button>
</template>

<script setup>
import { defineEmits } from "vue";
import useEasterEgg from "@/components/modules/wirdle_helpers/useEasterEgg.js";


useEasterEgg();
</script> …

我在页面上有几个嵌套组件，父组件有@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 …

在此文章中解释了如何在VueJS使用全局事件总线。它描述了使用在单独文件中定义的事件总线的通用方法的替代方法：

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

这必须在需要它的每个 SFC 中导入。另一种方法是将全局事件总线附加到主 Vue 实例：

// main.js
import Vue from 'vue';

Vue.prototype.$eventBus = new Vue(); // I call it here $eventBus instead of $eventHub

new Vue({
  el: '#app',
  template: '<App/>',
});

// or alternatively
import Vue from 'vue';
import App from './App.vue';

Vue.prototype.$eventBus = new Vue();

new Vue({
  render: (h): h(App),
}).$mount('#app');

现在我有一个问题，我不知道如何在单元测试中使用以这种方式创建的全局事件总线。

已经有一个关于使用第一个提到的方法测试全局事件总线的问题，但没有答案被接受。

我按照使用的答案之一中的建议进行了尝试createLocalVue，但这没有帮助：

it('should listen to the …