Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）
這篇博客主要介紹樹形控件的兩個小小的功能：
- 下拉菜單
- 輸入過濾框
以CSS樣式為主，也會涉及到Vue組件和element組件的使用。
對于沒有層級的數(shù)據(jù)，我們可以使用表格或卡片來展示。要展示或建立層級關系，就一定會用到樹形組件了。
使用Vue + Element UI，構建出最基本的樹如下圖所示：
現(xiàn)在我們就要在這個基礎上進行改造，使頁面更加符合我們的交互場景。
下拉菜單
將下拉菜單嵌到樹節(jié)點中，使操作更加簡便、緊湊。
效果演示
效果如圖：
- 圖示1：懸浮在樹節(jié)點狀態(tài)
- 圖示2：點擊三個點圖標狀態(tài)
- 圖示3： 選中并選擇菜單
如上，當鼠標懸浮在樹節(jié)點上時，出現(xiàn)豎著的三個小點，點擊時彈出下拉菜單，顯示可以對樹節(jié)點進行的操作。
實現(xiàn)步驟
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 下拉框代碼
很多樹形結(jié)構都會使用該下拉框，所以定義組件，方便復用。
<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'
}
]
}
},
// 注入數(shù)據(jù)
data: {
type: Object
}
},
methods: {
clickMenu(item) {
this.$emit(item.funcName, this.data)
}
}
}
模板代碼很簡單，是一個點擊觸發(fā)的下拉菜單組件（trigger="click"），菜單循環(huán)props中傳入的events屬性，data為從父組件拿到的數(shù)據(jù)，定義了菜單和菜單的事件（方法名稱），當點擊菜單（@click.native）時，觸發(fā)：
this.$emit(item.funcName, this.data)
容易看出，數(shù)據(jù)和實現(xiàn)方法都是父組件的，該子組件只做了轉(zhuǎn)發(fā)。
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>
根據(jù)數(shù)據(jù)節(jié)點的類型，注入不同的events屬性，顯示不同的下拉框菜單。（常用場景：根節(jié)點不可刪除、不可編輯，只能新增子級，葉子節(jié)點可以新增同級和子級）。
在父組件中的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時，將樹節(jié)點插槽中的node和data都注入了進去（:data="{node,data}"），在使用時也可以用過同樣的大括號+屬性名的方式拿到對應的屬性，這里體現(xiàn)了ES6解構賦值的特性。
4、父組件樣式
父組件中，樹節(jié)點的樣式：
.el-tree-node__content {
position: relative;
.operate-btns {
position: absolute;
right: 2px;
display: none;
}
// 鼠標懸停時，展示
&:hover,
:focus-within {
.operate-btns {
display: inline;
}
}
}
}
- 子絕對，父相對，使操作按鈕靠貼邊顯示
- 無狀態(tài)時不顯示，hover或內(nèi)部元素被激活時顯示（:hover :focus-within）
5、子組件樣式
旋轉(zhuǎn)圖標
原本的圖標使用的是element UI提供的 <i class="el-icon-more" />，是橫著的點點點↓
圖標有點小，顏色也不喜歡。改下字體讓它變大一點。這里注意需要修改的是元素的before偽類:
.el-icon-more:before {
content: "\E794";
color: #c0c4cc;
font-size: 20px;
}
加一個transform將它旋轉(zhuǎn)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);
}
至此，下拉全部完成。
除了用在樹節(jié)點中，也可以用在表格中。
輸入過濾框
el-tree提供了過濾方法，使用:filter-node-method="filterNode"屬性即可。這里主要分享樣式：
效果：
模板代碼：
<div class="filter-input"> <el-input placeholder="輸入資源名稱進行過濾" v-model="filterText" size="small" prefix-icon="el-icon-search"> </el-input> </div>
去掉輸入框上、左右邊框和圓角，并兩側(cè)留出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;
}
調(diào)整搜索圖標大小、顏色和粗細，并稍微調(diào)整位置：
.el-input__prefix{
.el-input__icon{
margin-right: 15px;
display: inline-block;
}
font-size:18px;
}
此時點擊輸入框，只有下邊變藍色，希望圖標的樣式也隨之更改。
只有input被觸發(fā)了focus事件，icon感知不到，:focus偽類不滿足需求了。我們可以使用:focus-within偽類，加在icon和input共同的父類上。
.el-input:focus-within{
.el-icon-search:before {
color: #3c6eff;
font-weight: bold;
}
}
至此完成。
總結(jié)
沒寫前端之前以為前端只是展示從后端拿到的數(shù)據(jù)，但現(xiàn)在覺得，前端作為面向用戶的直接門面，承擔了絕大部分交互體驗優(yōu)化的任務。
合理的布局和樣式能避免用戶的無效操作，體驗的優(yōu)化是一個漫長而細致的過程，可能需要仔細打磨，才能做出好用的產(chǎn)品。
以上就是Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）的詳細內(nèi)容，更多關于Vue+Element UI 整合下拉菜單的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue 虛擬列表的實現(xiàn)示例，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-03-03
基于Vue3+TypeScript實現(xiàn)鼠標框選功能
這篇文章主要介紹了基于Vue3+TypeScript實現(xiàn)鼠標框選功能,文中通過代碼示例給大家講解的非常纖細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-07-07
像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,下面這篇文章主要給大家介紹了關于vue3項目如何國際化的相關資料,需要的朋友可以參考下2022-09-09
使用VUE實現(xiàn)在table中文字信息超過5個隱藏鼠標移到時彈窗顯示全部
這篇文章主要介紹了使用VUE實現(xiàn)在table中文字信息超過5個隱藏，鼠標移到時彈窗顯示全部,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue項目導入導出文件功能以及導出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章給大家分享了vue axios二次封裝的相關知識點等內(nèi)容以及實例代碼，有興趣的朋友可以參考學習下。2018-07-07
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了vue 組件注冊的相關資料，幫助大家更好的理解和學習vue 組件的相關知識，感興趣的朋友可以了解下2020-11-11
詳解用vue2.x版本+adminLTE開源框架搭建后臺應用模版
這篇文章主要介紹了用vue2.x版本+adminLTE開源框架 搭建后臺應用模版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2018-03-03