vue点击其他区域隐藏当前弹出框

methods:{
	hidder (e) {

	  console.log(e)  //打印一下e可以看到具体内容和其他解决方法
      //判断点击的位置在弹出框之外
      if (e.srcElement.className!=='searchListcss') {
          this.searchListShow = false;    //等于false隐藏弹出框
      }
    }
  },
}

  mounted() {
  //添加点击事件      true  在捕获阶段执行
    document.addEventListener('click', this.hidder,true);
  },

//ps合不合标准我不知道,但是能实现效果(^v^),
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,要实现点击输入弹出弹出的功能,你可以按照以下步骤进行操作: 1. 创建一个自定义组件,用于显示弹出的内容。 2. 在父组件中,监听输入点击事件,当输入点击时,调用方法显示弹出。 3. 在子组件中,使用遮罩层样式实现弹出的遮罩效果。 4. 在子组件中,使用watch属性监听键盘的弹出和收起事件,根据键盘状态来控制弹出的显示和隐藏。 以下是一个示例代码,展示了如何在Vue3中实现点击输入弹出弹出的功能: ```javascript // 子组件:Popup.vue <template> <div class="popup" v-show="showPopup"> <!-- 弹出内容 --> </div> <div class="mask" v-show="showPopup" @click="hidePopup"></div> </template> <script> export default { data() { return { showPopup: false, // 弹出的显示状态 }; }, methods: { hidePopup() { this.showPopup = false; }, }, watch: { nowHeight() { if (this.defaultHeight !== this.nowHeight) { // 键盘弹出操作 setTimeout(() => { document.activeElement.scrollIntoView(false); let scrollTop = document.body.scrollTop; window.scrollTo(0, scrollTop + 100); }, 200); } else { // 键盘收起操作 } }, }, }; </script> // 父组件:App.vue <template> <div> <input type="text" @click="showPopup" /> <popup></popup> </div> </template> <script> import Popup from '@/components/Popup.vue'; export default { components: { Popup, }, methods: { showPopup() { this.$refs.popup.showPopup = true; }, }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值