在vue中实现点击选择框阻止弹出层消失的方法

网络编程 2024/11/21 佚名

3 1 2

在vue项目中，选择性别是用的一个弹出层，

<div class="sex" v-show="showed" transition='fade' @click="unshow">
        <ul @click.stop="stophidden">
          <li class="choice">选择</li>
          <li>
            <label>男</label>
            <input type="radio" name="sex" value="男">
          </li>
          <li>
            <label>女</label>
            <input type="radio" name="sex" value="女">
          </li>
        </ul>
      </div>

已经给这个.sex层绑定了一个v-show条件，实现了点击显示隐藏的效果

但是因为这个效果是加在父级上，所以在选择性别的时候，也会关闭弹出层，这个问题其实是一个冒泡事件，要解决这个问题用vue的阻止冒泡的属性stop即可

<ul @click.stop="stophidden">

这个方法不写也可以，或者写成

 <ul @click.stop="">

除了这个地方以外，还有一个弹出层，需要点击弹出层以外的地方关闭这个弹出层，如图：

如：

<div class="collect" @click="checktanchuceng">
  <button @click="unshow">toggle</button>
  <div class="tachuceng" v-show="showed">

  </div>
</div>
<script>
export default {
  data (){
    return {
      showed:false
    }
  },
  methods:{
    checktanchuceng (){
      if(this.showed=true){
        this.showed=false;
      }
    },
    unshow(){
      this.showed=!this.showed
    }
  }
}
</script>

这种情况下点击了按钮以后，弹出层不会显示，这是因为在父级上设置了checktanchuceng事件，冲突了，所以要给按钮加上阻止冒泡的方法，改成：

<button @click.stop="unshow">toggle</button>

以上这篇在vue中实现点击选择框阻止弹出层消失的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,阻止,弹出层消失

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“在vue中实现点击选择框阻止弹出层消失的方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月21日

在vue中实现点击选择框阻止弹出层消失的方法

vue-cli 使用vue-bus来全局控制的实例讲解

对vue下点击事件传参和不传参的区别详解

评论“在vue中实现点击选择框阻止弹出层消失的方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接