Vue+Element UI 트 리 컨트롤 드 롭 다운 기능 메뉴 통합(tree+dropdown+input)
드 롭 다운 메뉴
등급 이 없 는 데이터 에 대해 우 리 는 표 나 카드 로 전시 할 수 있다.계층 관 계 를 보 여주 거나 구축 하려 면 트 리 구성 요 소 를 사용 해 야 합 니 다.
Vue+Element UI 를 사용 하여 다음 그림 과 같은 기본 트 리 를 만 듭 니 다.
지금 우 리 는 이 를 바탕 으로 페이지 를 우리 의 상호작용 장면 에 더욱 부합 하도록 개조 해 야 한다.
드 롭 다운 메뉴
드 롭 다운 메뉴 를 트 리 노드 에 삽입 하여 조작 을 더욱 간편 하고 치밀 하 게 합 니 다.
효과 시범
효과 그림:
그림 1:나무 노드 에 떠 있 는 상태
그림 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회전 아이콘
원래 아이콘 은 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 통합 드 롭 다운 메뉴 에 대한 자 료 는 다른 관련 글 을 주목 하 세 요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.