el-tree右击出现菜单

最新推荐文章于 2024-10-16 11:03:12 发布

STUPID MAN

最新推荐文章于 2024-10-16 11:03:12 发布

阅读量776

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42261895/article/details/122670686

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

<div id="root">
   <el-col :span="4" :xs="24">

       <div class="block">
           <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
                       @node-contextmenu="rightClick">
               <span class="custom-tree-node" slot-scope="{ node, data }">
                   <i class="el-icon-folder">{{ node.label }}</i>
               </span>
           </el-tree>
       </div>
   </el-col>
   <!-- <img src="../js/folder.png" style="width: 30px;height: 30px" /> -->

   <div v-show="menuVisible" @mouseleave="menuVisible=!menuVisible">

       <ul id="menu">
           <li tabindex="-1" class="menu__item" id="menu-4994-1-0" @click="() => treeAdd(nodeData)">
               <el-link icon="el-icon-circle-plus-outline" :underline="false">添加</el-link>
           </li>

           <li tabindex="-1" class="menu__item" id="menu-4994-1-1" @click="treeRemove(nodeData)">
               <el-link icon="el-icon-remove-outline" :underline="false">删除</el-link>
           </li>

           <li tabindex="-1" class="menu__item" id="menu-4994-1-2" @click="rename(nodeData)">
               <el-link icon="el-icon-remove-outline" :underline="false">重命名</el-link>
           </li>
       </ul>
   </div>

   <el-dialog :visible.sync="renameVis" width="500px" append-to-body>
       <el-form ref="form" :model="form"  label-width="80px">
           <el-form-item label="文件名" prop="renameVal">
             <el-input v-model="form.renameVal" placeholder="请输入要修改的文件名" />
             
           </el-form-item>
           <div class="dialog-footer" style="margin-left: 150px;">
               <el-button type="primary" @click="submitForm(nodeData)">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
             </div>
       </el-form>
   </el-dialog>
</div>
</body>

<script type="text/javascript">

vm = new Vue({
   el:"#root",
   data() {
       return {
           nodeData: {},
           menuVisible: false,
           testVal:true,
           renameVis:false,
           renameVal:null,
           form:{
               renameVal:null
           },
           data: [{
               id: 1,
               icon: "el-icon-delete",
               label: '一级 1',
               children: [{
                   id: 4,
                   label: '二级 1-1',
                   children: [{
                       id: 9,
                       icon: 'el-icon-info',
                       label: '三级 1-1-1'
                   }, {
                       id: 10,
                       label: '三级 1-1-2'
                   }]
               }]
           }, {
               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'
               }]
           }]
       }

   },

   methods: {
       rightClick(MouseEvent, object, Node, element) {
           console.log(Node);
           this.nodeData = Node
           this.menuVisible = true;
           let menu = document.querySelector("#menu");
           menu.style.cssText = "position: fixed; left: " + (MouseEvent.clientX - 10) + 'px' + "; top: " + (MouseEvent.clientY - 25) + 'px; z-index: 999; cursor:pointer;'
       },
       treeAdd() {
           alert(this.nodeData)
       },
       treeRemove() {
   
           
       },
       //点击重命名
       rename(node){
           console.log("rename");
           this.renameVis = true;
           this.form.renameVal = node.data.label;
           console.log(this.form.renameVal);
       },
       //重命名确定点击
       submitForm(node){
           this.renameVis = false;
           node.data.label = this.form.renameVal;
       },
       //重命名取消
       cancel(){
           this.renameVis = false;

       }
   }
});

</script>
<style>
.menu__item {
   width: 100%;
   display: block;
   line-height: 20px;
   text-align: center;
   margin-top: 10px;
   text-align: center;

}

</style>
</html>