登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
Gitee 2025 年度开源项目评选中
代码拉取完成,页面将自动刷新
开源项目
>
WEB应用开发
>
Vue扩展组件
&
layui 组件
&&
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
341
Star
3.3K
Fork
624
lunar landing
/
layui-vue
代码
Issues
87
Pull Requests
4
Wiki
统计
流水线
服务
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
我知道了,不再自动展开
更新失败,请稍后重试!
移除标识
内容风险标识
本任务被
标识为内容中包含有代码安全 Bug 、隐私泄露等敏感信息,仓库外成员不可访问
关于laytable 组件@row-contextmenu能否直接绑定 lay-dropdown-menu的建议
待办的
#ID1ZC1
danlog
创建于
2025-10-15 10:21
## 背景 vue3新手一枚 - 1.描述你希望解决的问题 laytable 组件@row-contextmenu事件中是否可以直接关联lay-dropdown-menu 触发类型contextmenu - 2.陈述问题的现状 @row-contextmenu="handleRowContextMenu" 事件函数中代码 const mouseEvent = window.event || {}; contextMenu.visible = true; contextMenu.x = mouseEvent.clientX || 0; contextMenu.y = mouseEvent.clientY || 0; contextMenu.rowData = rowData; 通过用手动打开方式trigger="[]" 根据文档contextMenu.visible绑定到lay-dropdown-menu <lay-dropdown v-if="contextMenu.visible" :visible="contextMenu.visible" :trigger="[]" :content-style="{ position: 'fixed', left: contextMenu.x + 'px', top: contextMenu.y + 'px', zIndex: 9999 }" :auto-fit-position="false" :click-outside-to-close="false" > <template #content> <lay-dropdown-menu> <lay-dropdown-menu-item v-for="item in menuItems" :key="item.id" @click="handleMenuItemClick(item.id)" > <lay-icon :type="item.icon"></lay-icon> <span>{{ item.label }}</span> </lay-dropdown-menu-item> </lay-dropdown-menu> </template> </lay-dropdown> 实现弹出菜单显示。如果设定clickOutsideToClose="true",就会Cannot read properties of null (reading 'contains'),只能设置为false 所以实现只能通过在@row 事件和全局组件点击事件中设定visible = false来实现clickOutsideToClose="true"替换 // 添加全局点击事件监听 onMounted(() => { document.addEventListener('click', handleDocumentClick); }); // 移除事件监听 onUnmounted(() => { document.removeEventListener('click', handleDocumentClick); }); 本想使用table模板中关联lay-dropdown组件 ,但是我的数据表格列是动态生成的。甚至使用JSX动态生成的laytable。不适用模板中关联 - 3.合理的建议 原生的layui js。rowContextmenu事件中,使用dropdown.render显示后,默认clickoutsidetoclose=true; 是否可以参照原生layui 手动模式下可以设定clickoutsidetoclose=true。 - 4.当前版本 当前版本:2.23.3 ## 思路 第一种,理论上,右键显示菜单后。lay-dropdown组件元素是已经渲染显示状态,clickoutsidetoclose=true 照理是可以找到lay-dropdown组件。 第二种,table rowContextmenu事件是否可以直接与lay-dropdown组件元素关联。 描述大概的解决思路,可以包含 API 设计和伪代码等 ## 跟进 后续编辑,附上对应的 Pull Request 地址,可以用 `- [ ] some task` 的方式。
## 背景 vue3新手一枚 - 1.描述你希望解决的问题 laytable 组件@row-contextmenu事件中是否可以直接关联lay-dropdown-menu 触发类型contextmenu - 2.陈述问题的现状 @row-contextmenu="handleRowContextMenu" 事件函数中代码 const mouseEvent = window.event || {}; contextMenu.visible = true; contextMenu.x = mouseEvent.clientX || 0; contextMenu.y = mouseEvent.clientY || 0; contextMenu.rowData = rowData; 通过用手动打开方式trigger="[]" 根据文档contextMenu.visible绑定到lay-dropdown-menu <lay-dropdown v-if="contextMenu.visible" :visible="contextMenu.visible" :trigger="[]" :content-style="{ position: 'fixed', left: contextMenu.x + 'px', top: contextMenu.y + 'px', zIndex: 9999 }" :auto-fit-position="false" :click-outside-to-close="false" > <template #content> <lay-dropdown-menu> <lay-dropdown-menu-item v-for="item in menuItems" :key="item.id" @click="handleMenuItemClick(item.id)" > <lay-icon :type="item.icon"></lay-icon> <span>{{ item.label }}</span> </lay-dropdown-menu-item> </lay-dropdown-menu> </template> </lay-dropdown> 实现弹出菜单显示。如果设定clickOutsideToClose="true",就会Cannot read properties of null (reading 'contains'),只能设置为false 所以实现只能通过在@row 事件和全局组件点击事件中设定visible = false来实现clickOutsideToClose="true"替换 // 添加全局点击事件监听 onMounted(() => { document.addEventListener('click', handleDocumentClick); }); // 移除事件监听 onUnmounted(() => { document.removeEventListener('click', handleDocumentClick); }); 本想使用table模板中关联lay-dropdown组件 ,但是我的数据表格列是动态生成的。甚至使用JSX动态生成的laytable。不适用模板中关联 - 3.合理的建议 原生的layui js。rowContextmenu事件中,使用dropdown.render显示后,默认clickoutsidetoclose=true; 是否可以参照原生layui 手动模式下可以设定clickoutsidetoclose=true。 - 4.当前版本 当前版本:2.23.3 ## 思路 第一种,理论上,右键显示菜单后。lay-dropdown组件元素是已经渲染显示状态,clickoutsidetoclose=true 照理是可以找到lay-dropdown组件。 第二种,table rowContextmenu事件是否可以直接与lay-dropdown组件元素关联。 描述大概的解决思路,可以包含 API 设计和伪代码等 ## 跟进 后续编辑,附上对应的 Pull Request 地址,可以用 `- [ ] some task` 的方式。
评论 (
0
)
登录
后才可以发表评论
状态
待办的
待办的
进行中
已完成
已关闭
负责人
未设置
标签
未设置
标签管理
里程碑
未关联里程碑
未关联里程碑
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
分支 (22)
标签 (263)
2.x
master
spike/laychat
eslint/docs
spike/refactor-tree
spike/iconpicker-icon-sets
feat/jevin-treeSelect-cacheData-props
spike/fork-fix-single-form-item-required
jevin/layer-fix-interactive-slot-render-fork
jevin/lay-segmented-fork-spike
spike/refactor-datepicker-uncoupled
spike/more-vscode-launch-profiles
spike/cascader-add-warning-and-document-adjust
spike/cascader-selectkeys-changed-event
spike/relative-time
jevin/feat-less-to-css
Dockerfile
spike/laycode
spike/scriptUpdate
cloudflare
baobaobao/feature
1.x
2.23.3
2.23.2
2.23.1
2.23.0
2.22.2
2.22.1
2.22.0
2.21.2
2.21.1
2.21.0
2.20.0
2.19.3
2.19.2
2.19.1
2.19.0
2.18.3
2.18.2
2.18.1
2.18.0
2.17.7
2.17.6
2.17.5
2.17.4
2.17.3
2.17.2
2.17.1
2.17.0
2.16.8
2.16.7
2.16.6
2.16.5
2.16.2
2.16.1
2.16.0
2.15.2
2.15.1
2.15.0
2.14.4
2.14.3
2.14.2
2.14.1
2.14.0
2.13.4
2.13.3
2.13.2
2.13.1
2.13.0
2.12.0
2.11.4
2.11.5
2.11.3
2.11.0
2.11.1
2.11.2
2.10.2
2.10.3
2.10.1
2.10.0
2.9.1
2.8.0
2.8.1
2.9.0
2.7.4
2.7.2
2.6.3
2.6.4
2.7.0
2.7.1
2.6.2
2.6.0
2.6.1
2.5.0
2.4.1
2.4.0
2.3.19
2.3.20
2.3.17
2.3.18
2.3.15
2.3.16
2.3.13
2.3.14
2.3.12
2.3.10
2.3.11
2.3.9
2.3.8
2.3.7
2.3.5
2.3.6
2.3.4
2.3.3
2.3.2
2.3.1
2.3.0
2.2.2
2.2.1
2.2.0
2.1.4
2.1.2
2.1.3
2.1.1
2.0.5
2.1.0
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
2.0.0-beta.5
2.0.0-beta.4
2.0.0-beta.3
2.0.0-beta.2
2.0.0-beta.1
1.12.0
1.11.4
1.11.3
1.11.1
1.11.2
1.11.0
1.10.0
1.10.1
1.9.8
1.9.7
1.9.6
1.9.5
1.9.4
1.9.3
1.9.2
1.9.1
1.9.0
1.8.10
1.8.9
1.8.8
1.8.7
1.8.6
1.8.5
1.8.4
1.8.3
1.8.2
1.8.1
1.8.0
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.14
1.4.13
1.4.12
1.4.10
1.4.11
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.14
1.3.12
1.3.13
1.3.11
1.3.10
1.3.9
1.3.8
1.3.7
1.3.6
1.3.5
1.3.4
1.3.3
1.3.2
1.3.0
1.3.1
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.1.10
1.1.9
1.1.8
1.1.7
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.4.4
0.4.3
0.4.2
0.4.1
0.4.0
0.3.9
0.3.8
0.3.7
0.3.6
0.3.5
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.2.9
0.2.8
0.2.7
0.2.5
0.2.6
0.2.4
0.2.3
0.2.1
0.2.2
0.2.0
0.1.9
0.1.8
0.1.7
0.1.4
0.1.1
0.1.0
0.0.17
0.0.14
0.0.8
0.0.6
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级:高
置顶等级:中
置顶等级:低
优先级
不指定
严重
主要
次要
不重要
参与者(1)
TypeScript
1
https://gitee.com/lunarlanding/layui-vue.git
git@gitee.com:lunarlanding/layui-vue.git
lunarlanding
layui-vue
layui-vue
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大,如何减小?
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release(发行版)
将 PHP 项目自动发布到 packagist.org
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册