如何在汉堡菜单中显示小部件？

支持
1

你好，

我想在汉堡菜单中显示一个小组件。我查看了 (Deprecated) Display a "Discord Widget" in a dropdown button 来寻找解决方案，但无法在汉堡菜单中显示该按钮。
这是我的代码：

const showModal = require("discourse/lib/show-modal").default;

api.createWidget("modal-button", {
  tagName: "a.test",

  html() {
    return "打开模态框";
  },

  click() {
    showModal("fareharbor");
  }
});

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return [helper.attach('modal-button')];
});

我哪里做错了？

2

据我所知，我认为你唯一的问题是 helper.attach() 不存在。

你应该使用 helper.widget.attach()

3

感谢您的快速回复！
我尝试了您的建议，但同样没有奏效 :man_shrugging:

我尝试添加一个简单的 HTML 元素，代码如下：

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return helper.h("div", "测试文本");
});

但这也没有成功 :thinking:

4

您是在 withPluginApi() 内部执行此操作吗？

5

据我所知没有。我应该知道吗？

这段代码可以正常工作，因为它能正确地将元素添加到汉堡菜单中：

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return {href: "", rawLabel: "test"}
});

image
image250×205 3.95 KB

但我不确定如果不使用 widget 是否可以调用 showModal("fareharbor");。

生日快乐。:slight_smile:

编辑：
这是我的完整代码：

const showModal = require("discourse/lib/show-modal").default;

api.createWidget("modal-button", {
  tagName: "a.test",

  html() {
    return "Open Modal";
  },

  click() {
    showModal("fareharbor");
  }
});

// 不起作用
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return [helper.widget.attach('modal-button')];
});

// 起作用
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return {href: "", rawLabel: "test"}
});

return [helper.widget.attach('modal-button')]; 这部分会创建一个空链接：

<li><a class="widget-link" href="" title=""><span class="d-label"></span></a></li>
6

这段代码存放在哪里？您是通过管理后台的自定义菜单添加的吗？

另外，您能否尝试在 html() { } 区域中添加 console.log(showModal)，然后查看控制台中输出了什么？

7

是的，我是这样做的。

是的，它显示了一些看起来正常的输出（当我触发模态框时）：
(e,t){t=t||{};var n=(0,c.getOwner)(this),s=n.lookup("route:application"),a=s.controllerFor("modal");a.set("modalClass",t.modalClass||"".concat((0,u.dasherize)(e).toLowerCase(),"-modal"));var i=t.admi…

不过，除非我误解了什么，我的问题并不在于模态框的交互（这部分是正常工作的），而在于如何将我的小部件放入汉堡菜单中。

我参考了这篇模态框创建教程，它运行得非常完美，自定义按钮可以正常显示模态框。

image
image591×352 8.87 KB

image
image333×399 4.62 KB

模态框功能正常。
在模板中添加小部件按钮可以正常工作并触发模态框。
在汉堡菜单中添加一个普通链接也能正常工作。
……但在汉堡菜单中添加小部件按钮却无法工作，反而生成了一个空链接。在使用 decorateWidget 配合 “hamburger-menu” 时，是否存在某种限制？:thinking:

8

我已将此问题转达给相关部门，并将尽快处理。可能存在某些因素导致此问题无法正常工作。

感谢您提出此问题 :smile:

9

生日快乐，Jordan！

11

API 的设计初衷是认为 generalLinks 中的所有内容都应是 link 小部件：

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L189

因此，上面的示例返回的是另一个 Widget 实例，而实际上你需要返回一个或多个 JavaScript 对象字面量，就像你那个能正常工作的示例一样。这些对象是 link 小部件的参数，用于正确显示链接。

看起来你想要实现的功能是打开一个模态框。这可以通过 action 来实现。试试下面的代码：

const showModal = require("discourse/lib/show-modal").default;

api.reopenWidget('hamburger-menu', {
  openThing(e) {
     showModal('thing-modal');
  }
});

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return { action: 'openThing', label: 'open.thing' };
});

在这个例子中，我将一个名为 openThing 的新动作附加到汉堡菜单上，然后通过我的链接触发该动作。