点击其他地方隐藏下拉框(待完善)

思路:把点击能够展开下拉框得某些元素和其他元素比较

 

//点击可展开下拉框得一些元素
let item = [$('.ipItem')[0],$('.ip')[0],$('.myCanvas')[0]];
$(document).on('click',(e)=>{
             e = e || window.event;
             let t = e.target || e.srcElement;
   if (!item.includes(t)) {
                 this.actions.hideIpSelect();
   }
})

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过在 Vue 中使用事件监听来实现点击其他地方关闭下拉框的功能。具体步骤如下: 1. 在下拉框的组件中,添加一个 data 属性,用于标记下拉框的显示状态,比如 `isDropdownOpen`,初始值为 `false`。 2. 在下拉框组件的外层元素上添加一个 click 事件监听器,用来捕获点击事件。 3. 在点击事件处理函数中,判断点击事件的目标元素是否是下拉框本身或其内部元素,如果是,则不执行任何操作;如果不是,则将 `isDropdownOpen` 设置为 `false`,关闭下拉框。 4. 在下拉框组件的模板中,使用 `v-show` 或 `v-if` 根据 `isDropdownOpen` 的值来控制下拉框的显示与隐藏。 以下是一个示例代码: ```vue <template> <div ref="dropdown" @click="handleClickOutside"> <!-- 下拉框内容 --> </div> </template> <script> export default { data() { return { isDropdownOpen: false }; }, methods: { handleClickOutside(event) { if (!this.$refs.dropdown.contains(event.target)) { this.isDropdownOpen = false; } } } }; </script> ``` 在上述示例中,通过 `ref="dropdown"` 给下拉框的外层元素添加了一个引用,在点击事件处理函数中使用 `this.$refs.dropdown.contains(event.target)` 来判断点击事件的目标元素是否在下拉框内。如果不在,则将 `isDropdownOpen` 设置为 `false`,关闭下拉框。 你可以根据实际情况调整代码,比如在点击其他地方关闭下拉框时,可能还需要处理其他逻辑,比如清除选中的值等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值