Vue JS - 不是单击，而是双击显示组件

Question

我有四个图像，当鼠标光标悬停在它们上面时，会显示某个组件，我为这些图像应用了两个 mouseover 和 onclick 事件，我应用了 onclick 这样当屏幕到了手机版，也就是568像素以下的时候，点击图片的时候，会显示某个组件，再次点击这张图片的时候，会隐藏某个组件，看起来是这样的

<img v-on:click="isHidden = !isHidden" :src="item.img" alt="Show">

问题是我在手机版打开图片时需要双击图片才能显示组件而不是一个，我猜这个问题是因为我接受了 mousover 和 onclick 的两个事件，但我怎样才能摆脱这个问题？

<div v-for="(girl, index) in sectionGirlsList" v-bind:key="index">

  <div @mouseover="mouseOver(girl, hover = true)">
    <div>
        <img v-on:click="isHidden = !isHidden" :src="girl.girlImg" alt="Show">
    </div>

    <div v-if="selected == girl && !isHidden" class="next-to-description">
      <div v-for="(enjoy, index) in sectionGirlsList" :key="index">
    
            <component v-show="enjoy.hovered" v-bind:is="enjoy.componentName">
            </component>
       
      </div>
    </div>
  </div>

</div>


mouseOver: function (girl) {
  this.sectionGirlsList.forEach((girl) => (girl.hovered = false));
  this.isHidden = false;
  girl.hovered = true;
  this.selected = girl;
},

mouseout: function (girl) {
  this.selected = null
  girl.hovered = false;
},

再简单说明一下这个问题，当你select移动版浏览器控制台时，需要点击图片两次才能显示组件而不是一个，你也可以查看 full code in codesandbox

Answer 1

由于移动端没有持久化光标phone，需要点击元素触发悬停或鼠标进出事件；并且它也会导致点击事件被触发。正如你所说。

所以你需要在点击事件和它的回调函数中处理一些事情，这里命名为controller。
'clicked' 如果客户端第二次单击同一元素是否折叠图像，则使用变量进行存储。
如果客户端单击相同的元素进行折叠，它将为 false，如果用户在前一个元素仍处于选中状态时单击另一个元素，它将为 true。如果选择了任何内容，然后客户端选择了一个元素，则为真。
你可以看到它here

data(){
  return{
    clicked:false,
  }
},
    
methods:{
    mouseOver: function (girl) {
          this.show(girl);
          this.clicked = false;
        },
    
        mouseout: function (girl) {
          this.hide(girl);
          this.clicked = true;
        },
        show:function(girl){
          this.sectionGirlsList.forEach((girl) => (girl.hovered = false));
          this.isHidden = false;
          girl.hovered = true;
          this.selected = girl;
          
        },
        hide:function(girl){
          this.selected = null;
          girl.hovered = false;
          
        },
        controller: function(girl){
          if(this.clicked){
            if(this.selected === girl){
              this.hide(girl);
              this.clicked = false;
            }
            else{
              this.show(girl);
              this.clicked = true;
            }
          }
          else{
            this.show(girl);
            this.clicked = true;
          }
          
        },
}

我自己会使用 window 对象和 innerWidth 属性来确定屏幕的宽度，并为移动屏幕使用点击事件，为非移动屏幕使用悬停事件。

Vue JS - 不是单击，而是双击显示组件

Vue JS - instead of one click, the component is shown on double click

javascript

events

vue.js

vuejs2