vue 부동 메뉴, vue 3의 스마트 부동 메뉴를 소개합니다.

vue 부동 점 메뉴

나는 최근에 Vue 3의 발표에 매우 흥분했고, Vue 3을 위한 새로운 구성 요소 라이브러리를 만드는 것을 고려하고 있다.
나의 일부 항목은 끌 수 있는 부동 메뉴가 급히 필요하다.github에 Vue2에 대한 우수한 프로젝트가 있지만 저는 제 사용자 체험과 기능 수요를 만족시킬 수 있는 프로젝트를 찾지 못했습니다.vue-float-menu 화면에서 쉽게 드래그하고 하위 메뉴를 지원할 수 있는 유연한 메뉴를 만들려고 합니다.
언제든지 피드백을 보내주세요. 이 프로젝트나 문제에 대해 직면한 시도가 있습니다.

⚡ Edit on Stackblitz
⭐ Star this Project

프라부요토 / vue 부동 점 메뉴

Vue의 사용자 정의 부동 메뉴입니다.

특징

✅ 드래그 가능 메뉴 핸들 - 메뉴를 드래그하여 화면의 모든 위치에 쉽게 배치합니다.
✅ 지능형 메뉴 - 화면의 위쪽 및 아래쪽 가장자리를 감지하고 메뉴를 자동으로 뒤집습니다.
✅ 스마트 배치 - 메뉴 헤더가 자동으로 자신을 조정하고 항상 뷰포트에 유지됩니다.
✅ 네스트 메뉴 - 모든 레벨의 네스트 메뉴를 지원합니다.
✅ 작성 API- Vue 3의 최신 작성 API를 사용하여 구축됩니다.

⚙ 설치

yarn install vue-float-menu

🚀 입문

부동 메뉴에는 좋은 기본값이 있습니다.사용 가능한 모든 옵션에 대한 자세한 내용은 도구 목록을 보십시오.
다음 코드 세그먼트는 메뉴의 기본 위치를 top left, 기본 메뉴 방향을 bottom 로 설정합니다.

  <float-menu
    position="top left"
    :dimension="50"
    :menu="menuData"
    menu-direction="bottom"
  >
    <BoxIcon />
  </float-menu>

📺 프레젠테이션

도구

도구
유형
묘사
유지하다
숫자
메뉴 헤더width x height의 크기(픽셀).
위치
한 줄
메뉴 헤더의 초기 위치입니다.top left, top right, bottom left, bottom right, position 중 하나일 수 있습니다.
고정적
부울 모양
드래그를 해제하면 메뉴가 수정됩니다.top 아이템으로 메뉴 위치 고정
메뉴 방향
한 줄
메뉴의 방향을 설정합니다.또는 bottom일 수 있습니다.
메뉴 차원
대상
메뉴의 높이width 및 minimum를 설정합니다.
메뉴 데이터
대상
네스트된 메뉴를 생성하기 위해 데이터를 그룹화합니다.
선택한
작용
선택할 때 호출되는 갈고리.
가장자리를 따라 뒤집다
부울 모양
중첩 메뉴를 표시할 공간이 없으면 자동으로 메뉴 내용을 뒤집습니다.

유지하다

dimensionprop은 메뉴 헤더의 너비와 높이를 설정할 수 있습니다.도구는 메뉴 헤더의 높이와 너비를 단일 수치로 설정합니다.

  <float-menu :dimension=50>
    <BoxIcon />
  </float-menu>

위치

position 아이템은 메뉴 헤더의 초기 위치를 설정하는 데 사용됩니다.아이템은 아래의 모든 값을 받아들일 수 있습니다.

top left(기본값)

top right

bottom left

bottom right

  <float-menu :dimension=50 position="bottom right">
    <BoxIcon />
  </float-menu>

고정 위치

드래그 및 정적 고정 위치를 해제하려면 fixed 를 true 로 설정합니다.이 도구는 기본적으로 비활성화됩니다.이 아이템과 position 아이템을 사용하여 필요한 위치를 설정합니다.

  <float-menu :dimension=50 position="bottom right" fixed>
    <BoxIcon />
  </float-menu>

메뉴 방향

메뉴의 기본 방향을 설정합니다.top 또는 bottom로 설정할 수 있습니다.

  <float-menu :dimension=50 position="bottom right" menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

메뉴 헤더 크기

메뉴의 height 및 width 를 설정합니다.

  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    position="bottom right"
    menu-orientation="bottom"
    <BoxIcon />
  </float-menu>

채우기 메뉴

menu-data 도구를 사용하여 원하는 간단하거나 끼워 넣기 메뉴를 만듭니다.menu-data 유형의 수조를 채택
메뉴 항목 속성 목록
소유물
묘사
이름
메뉴 항목의 표시 이름입니다.
신분증
모든 메뉴 항목의 유일한 id입니다.이것은 구성 요소에 의해 자동으로 생성된 것이다.
골라냈어
하위 메뉴 선택을 강조표시로 표시합니다.
하위 메뉴 표시
하위 메뉴의 플래그를 표시하거나 숨깁니다.
하위 메뉴
하위 메뉴 데이터
여기서 우리는 세 개의 메뉴 항목이 있고 하위 메뉴가 없는 간단한 메뉴 구조를 만들었다.

const menuData = [
  { name: "New" },
  {
    name: "Edit",
    subMenu: {
      name: "edit-items",
      items: [{ name: "Copy" }, { name: "Paste" }],
    },
  },
  {
    name: "Open Recent",
    subMenu: {
      name: "recent-items",
      items: [{ name: "Document 1" }, { name: "Document 2" }],
    },
  },
]

  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="menuData"
    position="bottom right"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

선택

메뉴 항목에서 이벤트의 연결을 선택합니다.

  <float-menu
    :dimension=50
    position="bottom right"
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="{items: [{name: 'File'}, {name: 'Open'}]}"
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

가장자리 자동 뒤집기

이 아이템MenuItem 화면의 오른쪽 가장자리에 있는 메뉴 내용을 설정합니다.여러 레벨의 중첩 메뉴가 있으면 유용합니다.

  <float-menu
    :dimension=50
    position="bottom right"
    flip-on-edges
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

사용자 정의 아이콘

메뉴 아이콘을 사용자 정의하려면 flips 태그 사이에 내용을 전달하면 됩니다.여기에서 사용자 정의 아이콘을 렌더링합니다.

  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

여기서, 우리는 메뉴 핸들 안에 사용자 정의 텍스트를 보여 줍니다

  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    Click
  </float-menu>

🔨 내장

- 이 구성 요소는 Vue+로 작성되었습니다.

📄 메모

이 프로젝트는 @vue/cli가 아니라 사용됩니다.내가 웨이트를 선택한 것은 속도를 위해서였고, 나도 이것이 미래가 될 것이라고 믿는다.

활용단어참조

Prabhu Murthy–[email protected]
https://www.prabhumurthy.com
IT 라이센스에 따라 배포됩니다.자세한 내용은 float-menu 을 참조하십시오.
https://github.com/prabhuignoto/float-menu
만약 네가 이 프로젝트를 좋아한다면, 약간의 사랑을 보여라.⭐ Star this Project