Vue JS - 不是一键，而是双击显示组件答案

【问题标题】：Vue JS - instead of one click, the component is shown on double clickVue JS - 不是一键，而是双击显示组件
【发布时间】：2021-05-12 21:18:37
【问题描述】：

我有四个图像，当鼠标光标悬停在它们上面时，会显示某个组件，我为这些图像应用了两个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;
},

我再简单说明一下问题，当你在浏览器控制台选择手机版时，需要点击图片两次才能显示组件而不是一个，你也可以看到full code in codesandbox

【问题讨论】：

标签： javascript vue.js events vuejs2

【解决方案1】：

由于手机没有持久化光标，需要点击元素触发hover或鼠标进出事件；并且它也会导致点击事件被触发。就像你说的那样。

因此，您需要在点击事件及其回调函数中进行处理，这里称为控制器。
'clicked' 变量用于存储如果客户端第二次单击同一元素以折叠图像。
如果客户端单击相同的元素进行折叠，则为假，如果用户在前一个元素仍处于选中状态时单击另一个元素，则为真。如果选择了任何东西，然后客户端选择了一个元素，那么它将是真的。
你可以看到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 属性来确定屏幕的宽度，对移动设备使用 click 事件，对非移动屏幕使用悬停事件。

【讨论】：