Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）
這篇博客主要介紹樹形控件的兩個小小的功能：
- 下拉菜單
- 輸入過濾框
以CSS樣式為主，也會涉及到Vue組件和element組件的使用。
對于沒有層級的數(shù)據(jù)，我們可以使用表格或卡片來展示。要展示或建立層級關(guān)系，就一定會用到樹形組件了。
使用Vue + Element UI，構(gòu)建出最基本的樹如下圖所示：
現(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é)構(gòu)都會使用該下拉框，所以定義組件，方便復用。
<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解構(gòu)賦值的特性。
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)容，更多關(guān)于Vue+Element UI 整合下拉菜單的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了前端Vue2、Vue3和不同版本nuxt的插槽使用的相關(guān)資料,Vue2和Vue3中,插槽機制允許在組件模板中定義占位符,并在使用組件時插入自定義內(nèi)容,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
更好的了解項目的目錄結(jié)構(gòu),能更好的去開發(fā)項目,下面這篇文章主要給大家介紹了關(guān)于vue3項目目錄結(jié)構(gòu)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
在前端vue的開發(fā)中,有一點是必須要做的,那就是將所有的API接口封裝起來,因為從開發(fā)到最終上線的過程中,API是需要經(jīng)常更換的,下面這篇文章主要給大家介紹了關(guān)于Vue項目API接口封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
使用vue的v-for生成table并給table加上序號的實例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關(guān)資料,需要的朋友可以參考下2017-10-10
vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)
這篇文章主要介紹了vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能示例
這篇文章主要介紹了vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能,具有基本四則運算計算器以及科學計算器的功能,可實現(xiàn)開方、乘方、三角函數(shù)以及公式運算等功能,需要的朋友可以參考下2018-07-07
本文給大家介紹vue多層彈框時存在遮擋問題，解決思路首先想到的是找到對應的遮擋層的css標簽，然后修改z-index值，但是本思路只能解決首次問題，再次打開還會存在相同的問題，故該思路錯誤，下面給大家?guī)硪环N正確的思路，一起看看吧2022-03-03
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12