Vue+Element UI 트 리 컨트롤 드 롭 다운 기능 메뉴 통합(tree+dropdown+input)

이 블 로 그 는 주로 트 리 컨트롤 의 두 가지 작은 기능 을 소개 한다.
드 롭 다운 메뉴
  • 필터 상자 입력
  • CSS 스타일 을 위주 로 하고 Vue 구성 요소 와 element 구성 요소 의 사용 도 관련된다.
    등급 이 없 는 데이터 에 대해 우 리 는 표 나 카드 로 전시 할 수 있다.계층 관 계 를 보 여주 거나 구축 하려 면 트 리 구성 요 소 를 사용 해 야 합 니 다.
    Vue+Element UI 를 사용 하여 다음 그림 과 같은 기본 트 리 를 만 듭 니 다.

    지금 우 리 는 이 를 바탕 으로 페이지 를 우리 의 상호작용 장면 에 더욱 부합 하도록 개조 해 야 한다.
    드 롭 다운 메뉴
    드 롭 다운 메뉴 를 트 리 노드 에 삽입 하여 조작 을 더욱 간편 하고 치밀 하 게 합 니 다.
    효과 시범
    효과 그림:
    그림 1:나무 노드 에 떠 있 는 상태
  • 그림 2:세 개의 점 아이콘 상 태 를 클릭 합 니 다

  • 그림 3:메뉴 를 선택 하고 선택 하 십시오
    위 와 같이 마우스 가 트 리 노드 에 떠 있 을 때 세 개의 작은 점 이 나타 나 고 클릭 할 때 드 롭 다운 메뉴 를 꺼 내 트 리 노드 에 대한 동작 을 표시 합 니 다.
    실현 절차
    1.슬롯(slot)+하위 구성 요소 사용
    부모 구성 요소(트 리 컨트롤 포함)템 플 릿 코드
    
     <el-tree :data="resourceTree" :ref="tree" node-key="id" size="small"
      :highlight-current="true" :check-on-click-node="true" >
      <span class="custom-tree-node" slot-scope="{ node, data }">
       <div class="custom-tree-node-wrapper">
       <span class="custom-tree-node-label">
        {{ node.label }}
       </span>
       <span class="operate-btns">  
        <dot-dropdown :events="dropMenuEvents" :data="{node,data}" @addNode="addNode" />
       </span>
       </div>
      </span>
      </el-tree>
    2.DotDropdown 드 롭 다운 상자 코드
    많은 트 리 구조 가 이 드 롭 다운 상 자 를 사용 하기 때문에 구성 요 소 를 정의 하여 재 활용 하기에 편리 합 니 다.
    
    <template>
     <el-dropdown trigger="click" class="custom-tree-menu" size="small">
     <i class="el-icon-more rotate " />
     <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for='(item,index) in events' :key="index" :divided="index >0" @click.native="clickMenu(item)">
      {{item.label}}
      </el-dropdown-item>
     </el-dropdown-menu>
     </el-dropdown>
    </template>
    <script>
    export default {
     props: {
     events: {
     type: Array,
     default: function() {
     return [
      {
      label: '    ',
      funcName: 'addNode'
      },
      {
      label: '  ',
      funcName: 'editNode'
      },
      {
      label: '  ',
      funcName: 'deleteNode'
      }
     ]
     }
     },
     //     
     data: {
     type: Object
     }
     },
     methods: {
     clickMenu(item) {
     this.$emit(item.funcName, this.data)
     }
     }
    }
    템 플 릿 코드 는 간단 합 니 다.터치 하 는 드 롭 다운 메뉴 구성 요소(trigger="click")를 누 르 면 메뉴 순환 props 에 들 어 오 는 이벤트 속성 입 니 다.data 는 부모 구성 요소 에서 가 져 온 데이터 로 메뉴 와 메뉴 의 이벤트(방법 이름)를 정의 합 니 다.메뉴(@click.native)를 누 르 면 터치 합 니 다.
    
    this.$emit(item.funcName, this.data)
    데이터 와 실현 방법 은 모두 부모 구성 요소 이 고 이 하위 구성 요 소 는 퍼 가기 만 했 음 을 쉽게 알 수 있 습 니 다.
    3.부모 구성 요 소 는 하위 구성 요 소 를 사용 합 니 다.
    하위 구성 요 소 를 도입 하고 등록 하 며 대응 하 는 방법 을 정의 하면 됩 니 다.다음은 사용 예 시 를 드 립 니 다.
    
    <span class="operate-btns">
      <dot-dropdown v-if="data.type === 1" :events="dropMenuEvents" :data="{node,data}"/>
      <dot-dropdown v-if="data.type === 2" :events="sysDropMenuEvents" :data="{node,data}" @addNode="addResource" />
     </span>
    데이터 노드 의 유형 에 따라 이벤트 속성 을 주입 하여 드 롭 다운 상자 메뉴 를 표시 합 니 다.(자주 사용 하 는 장면:뿌리 노드 는 삭제 할 수 없고 편집 할 수 없 으 며 하위 등급 만 추가 할 수 있 고 잎 노드 는 같은 등급 과 하위 등급 을 추가 할 수 있 습 니 다).
    부모 구성 요소 의 data 에서 정의:
    
    sysDropMenuEvents: [{ label: '    ', funcName: 'addNode' }],
    
    dropMenuEvents: [
     { label: '    ', funcName: 'addPeerNode' },
     { label: '    ', funcName: 'addNode' },
     { label: '    ', funcName: 'distributeAction' },
     { label: '  ', funcName: 'editNode' },
     { label: '  ', funcName: 'removeNode' }
     ]
    부모 구성 요소 의 실제 기능 작성 방법:
    
    //         
     addResource({ node, data }) {
     ...
     }
    부모 구성 요소 가 data 를 주입 할 때 트 리 노드 슬롯 에 있 는 node 와 data 를 모두 주입 합 니 다(:data="{node,data}").사용 할 때 도 같은 대괄호+속성 명 을 사용 하여 해당 하 는 속성 을 얻 을 수 있 습 니 다.이것 은 ES6 의 할당 해제 특성 을 나 타 냅 니 다.
    4.부모 구성 요소 스타일
    부모 구성 요소 에서 트 리 노드 의 스타일:
    
     .el-tree-node__content {
     position: relative;
     .operate-btns {
      position: absolute;
      right: 2px;
      display: none;
     }
     //      ,  
     &:hover,
     :focus-within {
      .operate-btns {
      display: inline;
      }
     }
     }
     }
    4
  • 자 절대,아버지 상대,조작 단 추 를 옆 에 붙 여 표시 합 니 다
  • 상태 가 없 을 때 표시 되 지 않 습 니 다.hover 또는 내부 요소 가 활성화 되 었 을 때 표시 합 니 다(:hover:focus-wishin)
  • 5.하위 구성 요소 스타일

    회전 아이콘
    원래 아이콘 은 element UI 가 제공 하 는를 사용 하 며,가로로 점↓

    아이콘 이 작 아서 색깔 도 마음 에 안 들 어 요.글씨 체 를 좀 크게 바 꿔 라.여기 서 수정 해 야 할 것 은 요소 의 before 의사 클래스 입 니 다.
    
     .el-icon-more:before {
     content: "\E794";
     color: #c0c4cc;
     font-size: 20px;
    }
    transform 을 추가 하여 90°회전 시 키 고 서 스 펜 션 할 때 마우스 스타일 은 pointer 입 니 다.
    
    .rotate {
     cursor: pointer;
     margin-left: 5px;
     transform: rotate(90deg);
     }
    클릭 시 원형 반투명 회색 배경 추가:
    
    .rotate:focus {
     width: 20px;
     height: 20px;
     border-radius: 4em;
     background-color: rgba(130, 132, 138, 0.2);
    }
    이로써 드 롭 다운 은 모두 완성 되 었 다.
    트 리 노드 뿐만 아니 라 표 에 도 사용 할 수 있 습 니 다.
    입력 필터 상자
    el-tree 는 필터 방법 을 제공 합 니 다.사용:filter-node-method="filter Node"속성 을 사용 하면 됩 니 다.여 기 는 주로 스타일 을 공유 합 니 다:
    효과:


    템 플 릿 코드:
    
    <div class="filter-input">
     <el-input placeholder="          " v-model="filterText" size="small" prefix-icon="el-icon-search">
     </el-input>
    </div>
    입력 상자,좌우 테두리,원 각 을 제거 하고 양쪽 에 10px 사 이 드 를 남 깁 니 다.
    
     .el-input__inner,.el-input-group__prepend{
     width: calc(100% - 20px);
     margin:0 10px;
     height: 40px;
     border-top:none;
     border-width: 0 0 1px;
     border-radius:0;
     }
    검색 아이콘 의 크기,색상,굵기 를 조정 하고 위 치 를 약간 조정 합 니 다.
    
     .el-input__prefix{
     .el-input__icon{
     margin-right: 15px;
     display: inline-block;
     }
     font-size:18px;
     }
    입력 상 자 를 누 르 면 아래 만 파란색 으로 변 하고 아이콘 의 스타일 도 바 뀌 기 를 바 랍 니 다.
    input 만 focus 이벤트 가 촉발 되 었 습 니 다.icon 은 감지 되 지 않 습 니 다.:focus 의사 류 는 수 요 를 만족 시 키 지 못 합 니 다.우 리 는 focus-within 위 류 를 사용 할 수 있 습 니 다.icon 과 input 의 공 통 된 부모 클래스 에 추가 할 수 있 습 니 다.
    
    .el-input:focus-within{
     .el-icon-search:before {
      color: #3c6eff;
      font-weight: bold;
     }
     }
    이로써 완성 하 다.
    총결산
    전단 을 쓰 지 않 기 전에 전단 은 백 엔 드 에서 받 은 데 이 터 를 보 여 주 는 것 이 라 고 생각 했 지만 지금 은 전단 이 사용 자 를 대상 으로 하 는 직접적인 외관 으로서 대부분의 상호작용 체험 최적화 임 무 를 맡 았 다 고 생각 합 니 다.
    합 리 적 인 구조 와 스타일 은 사용자 의 무효 한 조작 을 피 할 수 있 고 체험 의 최 적 화 는 길 고 세밀 한 과정 이기 때문에 꼼꼼 하 게 다 듬 어야 좋 은 제품 을 만 들 수 있다.
    이상 은 Vue+Element UI 트 리 컨트롤 통합 드 롭 다운 기능 메뉴(tree+dropdown+input)에 대한 자세 한 내용 입 니 다.Vue+Element UI 통합 드 롭 다운 메뉴 에 대한 자 료 는 다른 관련 글 을 주목 하 세 요!

    좋은 웹페이지 즐겨찾기