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 통합 드 롭 다운 메뉴 에 대한 자 료 는 다른 관련 글 을 주목 하 세 요!