Angular의 사용자 정의 오른쪽 클릭 메뉴 : FEAT PrimeNg

<p-contextMenu [global]="true" [model]="items" (onShow)="onShow()"></p-contextMenu>

[global] - 화면 어디에서나 오른쪽 클릭을 허용하고 이미지/테이블과 같은 특정 태그에서 오른쪽 클릭이 발생하도록 할 수 있습니다.

[모델] - 다음 메뉴 항목입니다MenuItems API

(onShow) - 컨텍스트 메뉴가 열릴 때마다 이 이벤트가 호출됩니다. 아무것도 선택/강조 표시되지 않은 경우 복사를 비활성화하는 데 사용됩니다.

특정 코드 부분 설명.

 items: MenuItem[] = [
    {
      label: 'Copy',
      icon: 'pi pi-copy',
      command: this.copyText.bind(this)
    }
  ];

이제 복사 옵션만 활성화했기 때문에 이 배열에는 하나의 요소만 포함됩니다. 복사본에서 클릭이 발생할 때마다 명령 기능이 실행됩니다.

onShow() {
    const selected = window.getSelection()?.toString()
    this.items[0].disabled = !selected
  }

이 onShow()는 컨텍스트가 열릴 때마다 호출됩니다. 창에서 아무 것도 선택하지 않으면 복사 버튼이 비활성화됩니다.

 copyText() {
    const selected = window.getSelection()?.toString()
    if (selected) {
      this.clipboard.copy(selected)
      this.showToaster(selected)
    }
  }

copyText()는 항목 배열에 바인딩됩니다. 각진 클립보드를 사용하여 선택한 문자열을 복사하고 토스터를 보여줍니다.

이를 정확하게 구현하려면 패키지에 module.ts라는 여러 항목이 필요합니다. 설정하려면 PrimeNg 문서를 확인하세요.

붙여넣기 옵션이 없는 이유는 무엇입니까?

마우스 오른쪽 버튼을 클릭하면 document.activeElement를 사용하여 활성 요소를 가져올 수 있으며 입력 필드 및 setAttribute 값 = copyText인지 확인하기 위해 몇 가지 검사를 수행합니다.

이 document.activeElement는 각도를 벗어나고 각도는 우리가 activeElement에서 변경한 사항에 반응하지 않습니다.

붙여넣기가 필요한 입력이 하나만 있다고 가정해 보겠습니다. 이렇게 하면 됩니다.

하지만 이미 프로젝트에 있고 페이지 전체에 양식이 있는 경우 제대로 작동하려면 많은 변경 작업을 수행해야 합니다.

다른 중요한 점은 붙여넣기에는 민감한 클립보드 기록 권한이 필요하며 인증을 받아야 하는 일부 웹사이트에서는 클립보드 기록에 대한 액세스를 허용하지 않을 수 있다는 것입니다.

그래서 키보드 단축키를 누르기 위해 토스터를 보여주기만 하면 됩니다. 붙여넣기 및 자바스크립트에 대해 자세히 알아보세요.

MDN Paste Event에 대해 자세히 알아보기

MDN clipboard에 대해 자세히 알아보기

여기에 계시다면 이 블로그를 재미있게 읽으셨을 수도 있습니다. 저를 팔로우하고 buttermilk 🥛을(를) 고려할 수 있습니다.

평화 🕊

나에게서 더 많은 무료 기사!