這篇博客主要介紹樹形控件的兩個(gè)小小的功能：

下拉菜單 輸入過濾框

以CSS樣式為主，也會(huì)涉及到Vue組件和element組件的使用。

對于沒有層級的數(shù)據(jù)，我們可以使用表格或卡片來展示。要展示或建立層級關(guān)系，就一定會(huì)用到樹形組件了。使用Vue + Element UI，構(gòu)建出最基本的樹如下圖所示：

現(xiàn)在我們就要在這個(gè)基礎(chǔ)上進(jìn)行改造，使頁面更加符合我們的交互場景。

下拉菜單

將下拉菜單嵌到樹節(jié)點(diǎn)中，使操作更加簡便、緊湊。

效果演示

效果如圖：

圖示1：懸浮在樹節(jié)點(diǎn)狀態(tài)

圖示2：點(diǎn)擊三個(gè)點(diǎn)圖標(biāo)狀態(tài)

圖示3： 選中并選擇菜單

如上，當(dāng)鼠標(biāo)懸浮在樹節(jié)點(diǎn)上時(shí)，出現(xiàn)豎著的三個(gè)小點(diǎn)，點(diǎn)擊時(shí)彈出下拉菜單，顯示可以對樹節(jié)點(diǎn)進(jìn)行的操作。

實(shí)現(xiàn)步驟

1、使用插槽（slot） + 子組件

父組件（含有樹形控件）模板代碼

<el-tree :data='resourceTree' :ref='tree' node-key='id' size='small' :highlight-current='true' :check-on-click-node='true' > <span 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é)構(gòu)都會(huì)使用該下拉框，所以定義組件，方便復(fù)用。

<template> <el-dropdown trigger='click' size='small'> <i /> <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) } }}

模板代碼很簡單，是一個(gè)點(diǎn)擊觸發(fā)的下拉菜單組件（trigger='click'），菜單循環(huán)props中傳入的events屬性，data為從父組件拿到的數(shù)據(jù)，定義了菜單和菜單的事件（方法名稱），當(dāng)點(diǎn)擊菜單（@click.native）時(shí)，觸發(fā)：

this.$emit(item.funcName, this.data)

容易看出，數(shù)據(jù)和實(shí)現(xiàn)方法都是父組件的，該子組件只做了轉(zhuǎn)發(fā)。

3、 父組件使用子組件

引入和注冊子組件，并定義好對應(yīng)的方法即可。下面給出使用示例：

<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é)點(diǎn)的類型，注入不同的events屬性，顯示不同的下拉框菜單。（常用場景：根節(jié)點(diǎn)不可刪除、不可編輯，只能新增子級，葉子節(jié)點(diǎn)可以新增同級和子級）。在父組件中的data中定義:

sysDropMenuEvents: [{ label: ’新增資源’, funcName: ’addNode’ }],dropMenuEvents: [ { label: ’新建同級’, funcName: ’addPeerNode’ }, { label: ’新建子級’, funcName: ’addNode’ }, { label: ’分配操作’, funcName: ’distributeAction’ }, { label: ’編輯’, funcName: ’editNode’ }, { label: ’刪除’, funcName: ’removeNode’ } ]

父組件編寫實(shí)際功能方法：

// 打開新增資源彈窗 addResource({ node, data }) { ... }

父組件注入data時(shí)，將樹節(jié)點(diǎn)插槽中的node和data都注入了進(jìn)去（:data='{node,data}'），在使用時(shí)也可以用過同樣的大括號+屬性名的方式拿到對應(yīng)的屬性，這里體現(xiàn)了ES6解構(gòu)賦值的特性。

4、父組件樣式

父組件中，樹節(jié)點(diǎn)的樣式：

.el-tree-node__content { position: relative; .operate-btns { position: absolute; right: 2px; display: none; } // 鼠標(biāo)懸停時(shí)，展示 &:hover, :focus-within { .operate-btns { display: inline; } } } } 子絕對，父相對，使操作按鈕靠貼邊顯示 無狀態(tài)時(shí)不顯示，hover或內(nèi)部元素被激活時(shí)顯示（:hover :focus-within）

5、子組件樣式

旋轉(zhuǎn)圖標(biāo)原本的圖標(biāo)使用的是element UI提供的 <i />，是橫著的點(diǎn)點(diǎn)點(diǎn)↓

圖標(biāo)有點(diǎn)小，顏色也不喜歡。改下字體讓它變大一點(diǎn)。這里注意需要修改的是元素的before偽類:

.el-icon-more:before { content: 'E794'; color: #c0c4cc; font-size: 20px;}

加一個(gè)transform將它旋轉(zhuǎn)90°，懸停時(shí)鼠標(biāo)樣式為pointer:

.rotate { cursor: pointer; margin-left: 5px; transform: rotate(90deg); }

點(diǎn)擊時(shí)，增加圓形半透明的灰色背景：

.rotate:focus { width: 20px; height: 20px; border-radius: 4em; background-color: rgba(130, 132, 138, 0.2);}

至此，下拉全部完成。除了用在樹節(jié)點(diǎn)中，也可以用在表格中。

輸入過濾框

el-tree提供了過濾方法，使用:filter-node-method='filterNode'屬性即可。這里主要分享樣式：效果：

模板代碼：

<div class='filter-input'> <el-input placeholder='輸入資源名稱進(jìn)行過濾' 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)整搜索圖標(biāo)大小、顏色和粗細(xì)，并稍微調(diào)整位置：

.el-input__prefix{ .el-input__icon{ margin-right: 15px; display: inline-block; } font-size:18px; }

此時(shí)點(diǎn)擊輸入框，只有下邊變藍(lán)色，希望圖標(biāo)的樣式也隨之更改。只有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)在覺得，前端作為面向用戶的直接門面，承擔(dān)了絕大部分交互體驗(yàn)優(yōu)化的任務(wù)。合理的布局和樣式能避免用戶的無效操作，體驗(yàn)的優(yōu)化是一個(gè)漫長而細(xì)致的過程，可能需要仔細(xì)打磨，才能做出好用的產(chǎn)品。

以上就是Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）的詳細(xì)內(nèi)容，更多關(guān)于Vue+Element UI 整合下拉菜單的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！