Vue(26)el-tree樹形控制元件實現滑鼠hover顯示與隱藏
阿新 • • 發佈:2021-12-08
實現效果與原理
我們希望實現滑鼠移動至樹型結構的結點上就顯示按鈕,移出就隱藏按鈕
實現原理:是通過@mouseenter
和 @mouseleave
兩個屬性來控制滑鼠hover的效果,再配合v-show
來控制是否展示你需要的控制元件
具體程式碼
<el-tree :data="data" ref="tree" default-expand-all node-key="id" :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)"> <span>{{ node.label }}</span> <span> <el-tooltip v-show="data.show" class="item" effect="dark" content="文字提示" placement="top"> <el-button type="text" size="mini" @click="() => append(data)" icon="el-icon-plus" > </el-button> </el-tooltip> <el-dropdown v-show="data.show" @command="handleCommand"> <span class="el-dropdown-link"> <i class="el-icon-more"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="addFolder">新增資料夾</el-dropdown-item> <el-dropdown-item command="edit">編輯</el-dropdown-item> <el-dropdown-item command="delete">刪除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </span> </span> </el-tree> <script> export default { data() { const data = [{ id: 1, label: '一級 1', children: [{ id: 4, label: '二級 1-1', }] }, { id: 2, label: '一級 2', children: [{ id: 5, label: '二級 2-1', }, { id: 6, label: '二級 2-2', }] }, { id: 3, label: '一級 3', children: [{ id: 7, label: '二級 3-1', }, { id: 8, label: '二級 3-2', }] }] return { defaultProps: { children: 'children', label: 'label' }, data: JSON.parse(JSON.stringify(data)) } }, methods: { mouseenter(data) { this.$set(data, 'show', true) }, mouseleave(data) { this.$set(data, 'show', false) }, } } </script>