如何自定义dx-toolbar（DevExtreme）中的下拉按钮

有两种可行的实现方式，你可以根据业务场景选择：

方案1：使用官方模板插槽（更稳定，推荐） #

DevExtreme v20.1.4 版本的dx-toolbar原生支持overflowMenuButtonTemplate模板插槽，直接定义该插槽即可完全替换默认的图标按钮，支持自定义字符串、图文组合等任意内容。
示例代码如下：

<dx-toolbar>
  <!-- 你的普通工具栏项 -->
  <dxi-item 
    text="内部菜单项1"
    locateInMenu="always">
  </dxi-item>
  <dxi-item 
    text="内部菜单项2"
    locateInMenu="always">
  </dxi-item>

  <!-- 自定义溢出按钮模板 -->
  <div *dxTemplate="let _ of 'overflowMenuButtonTemplate'">
    <!-- 这里替换为你需要显示的自定义字符串 -->
    更多操作
  </div>
</dx-toolbar>

该方案不会受DevExtreme后续样式调整影响，还支持绑定动态文本、添加自定义事件等扩展需求。

方案2：CSS样式覆盖（临时修改可选） #

如果只需要替换文字不想调整组件模板，可以通过CSS伪元素插入自定义内容，隐藏默认图标：

/* 注意Angular组件样式隔离需要加::ng-deep，也可以把这段样式放到全局样式文件中 */
::ng-deep .dx-toolbar .dx-toolbar-menu-button .dx-icon-overflow {
  font-size: 0;
}
::ng-deep .dx-toolbar .dx-toolbar-menu-button .dx-icon-overflow::before {
  content: "更多";
  font-size: 14px;
  padding: 0 6px;
}

注意该方案依赖DevExtreme的内部类名，版本升级时可能需要调整适配。

内容的提问来源于stack exchange，提问作者Ever Dev