Primeng 拆分按钮在选择时添加图标

Question

我想在用户选择拆分按钮中的单击选项后添加勾号图标。 怎样才能实现呢？请给我建议。谢谢 示例如下 -

Answer 1

有一个解决方案，我会尝试解释我的解决方案，并且会给您一个 stackblitz 链接：

首先，您应该创建扩展

MenuItem

接口的新类型：

type MenuItemWithSelection = MenuItem & {
  isSelected?: boolean;
};

通过这样做，您可以为每个项目添加

isSelected

属性并检查它以了解选择了哪个项目。另外，您应该在每个项目上添加

id

属性，以便通过 id 获取元素，并在项目标签后面添加勾号图标。

然后，您应该创建一个函数，在项目的标签后面创建图标：

  /**
   * Creates a tick icon for the specified element ID.
   * @param elId - The ID of the element for which to create the tick icon.
   */
  createTickIcon(elId: string) {
    setTimeout(() => {
      const el = document.getElementById(elId);

      // Check if the element exists
      if (el) {
        // Get the last child element (assumed to be the label of the item)
        const text = el.lastElementChild;

        // Unicode for the tick icon
        const icon = '\ue909';

        // Set the data attribute for the tick icon on the text element to use it as content after the text
        text.setAttribute('data-tick-icon', icon);
      }
    }, 0);
  }

现在您需要一个函数来处理选择逻辑，以知道何时应该创建勾号图标：

  /**
   * Selects an item by its ID, updates the selection status, and creates a check icon if selected.
   * @param elId - The ID of the element to be selected.
   */
  selectAndCreateCheckIcon(elId: string) {
    const selectedItem = this.items.find((el) => el.id === elId);

    // Deselect all other items
    this.items.forEach((el) => {
      if (el.id !== elId) {
        el.isSelected = false;
      }
    });

    // Update the selection status and create a check icon if the item is found
    if (selectedItem) {
      selectedItem.isSelected = !selectedItem.isSelected;

      // If the item is selected, create a check icon
      if (selectedItem.isSelected) {
        this.createTickIcon(elId);
      }
    }
  }

您绝对注意到了，单击任何项目后，拆分按钮中的模式会立即关闭，因此您需要在模式显示上创建图标，您可以使用此功能来处理：

  /**
   * Handles the click event on the dropdown when show the menu.
   * Finds the selected item and creates a tick icon for it.
   */
  onDropdownClick() {
    // Find the selected item
    const selectedElement = this.items.find((element) => element.isSelected);

    // Check if a selected item exists
    if (selectedElement) {
      setTimeout(() => {
        // Create a tick icon for the selected item
        this.createTickIcon(selectedElement.id);
      }, 0);
    }
  }

我知道这是一个有点乏味的解决方案，但是，您可以将此功能封装在如下所示的类中，并使用此类创建具有选择功能的拆分按钮：

import { MenuItem } from 'primeng/api';

type MenuItemWithSelection = MenuItem & {
  isSelected?: boolean;
};

export class SplitButtonWithTick {
  items: MenuItemWithSelection[];

  /**
   * Handles the click event on the dropdown when show the menu.
   * Finds the selected item and creates a tick icon for it.
   */
  onDropdownClick() {
    // Find the selected item
    const selectedElement = this.items.find((element) => element.isSelected);

    // Check if a selected item exists
    if (selectedElement) {
      setTimeout(() => {
        // Create a tick icon for the selected item
        this.createTickIcon(selectedElement.id);
      }, 0);
    }
  }

  /**
   * Creates a tick icon for the specified element ID.
   * @param elId - The ID of the element for which to create the tick icon.
   */
  createTickIcon(elId: string) {
    setTimeout(() => {
      const el = document.getElementById(elId);

      // Check if the element exists
      if (el) {
        // Get the last child element (assumed to be the text of the item)
        const text = el.lastElementChild;

        // Unicode for the tick icon
        const icon = '\ue909';

        // Set the data attribute for the tick icon on the text element to use it as content after the text
        text.setAttribute('data-tick-icon', icon);
      }
    }, 0);
  }

  /**
   * Selects an item by its ID, updates the selection status, and creates a check icon if selected.
   * @param elId - The ID of the element to be selected.
   */
  selectAndCreateCheckIcon(elId: string) {
    const selectedItem = this.items.find((el) => el.id === elId);

    // Deselect all other items
    this.items.forEach((el) => {
      if (el.id !== elId) {
        el.isSelected = false;
      }
    });

    // Update the selection status and create a check icon if the item is found
    if (selectedItem) {
      selectedItem.isSelected = !selectedItem.isSelected;

      // If the item is selected, create a check icon
      if (selectedItem.isSelected) {
        this.createTickIcon(elId);
      }
    }
  }
}

现在在您的组件中只需创建此类的实例：

  splitButton: SplitButtonWithTick = new SplitButtonWithTick();

并像这样定义项目：

   this.splitButton.items = [
      {
        label: 'Update',
        icon: 'pi pi-refresh',
        command: () => {
          this.update();
          //add this to add check icon
          this.splitButton.selectAndCreateCheckIcon('updateId');
        },
        id: 'updateId',
        isSelected: false,
      },
      {
        label: 'Delete',
        icon: 'pi pi-times',
        command: () => {
          this.delete();
          this.splitButton.selectAndCreateCheckIcon('deleteId');
        },
        id: 'deleteId',
        isSelected: false,
      },
      {
        label: 'Angular.io',
        icon: 'pi pi-info',
        url: 'http://angular.io',
        id: 'angularId',
        command: () => {
          this.splitButton.selectAndCreateCheckIcon('angularId');
        },
        isSelected: false,
      },
      { separator: true },
      {
        label: 'Setup',
        icon: 'pi pi-cog',
        routerLink: ['/setup'],
        id: 'cogId',
        command: () => {
          this.splitButton.selectAndCreateCheckIcon('cogId');
        },
        isSelected: false,
      },
    ];

在你的html中：

<h5>Basic</h5>
<p-splitButton
  label="Save"
  icon="pi pi-plus"
  (onClick)="save('info')"
  (onDropdownClick)="splitButton.onDropdownClick()"
  [model]="splitButton.items"
></p-splitButton>

此解决方案中最重要的部分是CSS：

.p-menuitem-text::after {
 //if it doesn't work add :host ::ng-deep before .p-menuitem-text
  content: attr(data-tick-icon);
  font-family: 'primeicons' !important;
  margin: 0px 10px;
}

这是

stackblitz

链接： 选择项目时添加勾号图标