焦点问题

最新推荐文章于 2023-06-14 15:20:14 发布

whale·fall

最新推荐文章于 2023-06-14 15:20:14 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/stm870581942/article/details/113925778

版权

本文探讨了一个Vue应用中的焦点问题，即点击按钮后屏幕显示，但焦点仍然停留在按钮上，导致回车键再次触发按钮点击事件。作者尝试使用focus指令未果，最后通过在按钮上添加条件渲染避免了该问题。解决方案是通过v-if控制按钮的显示，只有在特定条件下（如变量screen为true时）按钮才可见，从而防止了不必要的事件触发。

摘要由CSDN通过智能技术生成

遇到一个焦点问题：点击按钮，screen显示时，焦点不在screen上，而在按钮上，接下来按回车会再执行按钮的点击功能，我查找了一些资料，最多的解决方法是注册自定义指令，我想使用focus实现焦点的切换，但不可行，最终我将按钮添加了if条件，当为true时执行，并将if改为false

<div class="pic">
  <div class="btn">
    <button class="login" @click="openLogin()">登录</button>
  </div>
</div>
<div class="screen" v-if="screen">
  <div class="return">
    <p>登录</p>
    <a href="#" @click="closeLogin()"></a>
  </div>
  <div class="QRCode" v-if="qrCode">
    <div>
      <p>扫码登录</p>
      <div class="qr"><img src="" alt="" /></div>
      <div class="switch" @click="qr()"><a href="#">使用手机登录</a></div>
    </div>
  </div>
  <div class="number">
    <div class="account">
      <input
        type="text"
        v-model="accounts"
        placeholder="请输入手机号"
      />
    </div>
    <div class="password">
      <input
        type="password"
        v-model="passwords"
        placeholder="请输入密码"
      />
    </div>
    <p v-show="isLoginErr">{{ this.loginErr }}</p>
    <div class="Nlogin">
      <button ref="Nlogin" @click="phone" @keyup.enter="phone">登录</button>
    </div>
  </div>
</div>