Ionic 4 - 自定义上下文菜单

Posted 2023-03-14

【中文标题】Ionic 4 - 自定义上下文菜单

【英文标题】：Ionic 4 - Customize context menu

【发布时间】：2019-01-27 17:24:56

【问题描述】：

我正在构建一个具有大量文本编辑的 Ionic 应用程序，并且我想自定义在进行文本选择时出现的上下文菜单（如下所示）。

如何向此菜单添加按钮？可以进一步定制吗？是否可以将此菜单完全切换为用户进行文本选择时出现的其他一些自定义 html 菜单？

我看过插件 cordova-plugin-context-menu 但它似乎不是我需要的（虽然很难说因为它没有任何屏幕截图而且我不确定它是否相同我所说的“上下文菜单”）。

【问题讨论】：

喜欢这个？ npmjs.com/package/ionic-context-menu

没有。与其他解决方案一样，这似乎是我更喜欢称之为“下拉菜单”而不是“上下文菜单”。代码似乎坏了，所以我无法对其进行测试，但从示例中可以清楚地看出，预期用途是像下拉菜单一样在标题栏中，而不是我所指的本机菜单。

【参考方案1】：

Ben Nadel 在 Angular 上提供了一个解决方案（对他的解决方案 https://www.bennadel.com/blog/3439-creating-a-medium-inspired-text-selection-directive-in-angular-5-2-10.htm 表示敬意），这仅适用于标签，不适用于 Input 元素 (https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange)，要在 Ionic 上工作> V4 做了以下调整，

第 1 步： 通常，当我们使用 ionic cli 创建指令时，它会将 ref 推送到 app.module.ts，如果您在不同的页面上使用指令，请从 app.module.ts 中删除该指令并包含在您的 component.module.ts

第 2 步：

在 text-select.directive.ts 上，将 mousedown 替换为 touchend，将 mouseup 替换为 touchstart 事件。

你在这里完成是截图

更新

不幸的是，此文本选择适用于标签，但不适用于输入 元素，检查 https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange 浏览器兼容性部分

【讨论】：

谢谢，这是我正在寻找的解决方案。如果您愿意再试一次，我还有另一个关于 diff Ionic 问题的开放赏金***.com/questions/54897455/…