快捷導(dǎo)航

vue 實(shí)現(xiàn)dot-dropdown的實(shí)例代碼

更新時(shí)間：2025年06月20日 09:56:47 作者：努力往上爬de蝸牛

這篇文章主要介紹了vue實(shí)現(xiàn)dot-dropdown的相關(guān)操作,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue 實(shí)現(xiàn)dot-dropdown的代碼如下：

<template>
  <div class="app-container">
    <div class="mt30"></div>
    <el-row :gutter="20">
      <!-- title -->
      <!-- <div class="modt-box">導(dǎo)航管理</div> -->
      <el-col :span="2">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <!-- default-expand-all=""  tree-border-->
        <div class="lefttree">
        <div class="tit-box">菜單目錄</div>
        <el-tree
          class="treeclass"
          default-expand-all=""
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          @node-click="nodeclick"
          @check-change="handleClick"
          check-strictly
          node-key="id"
        >
          <!-- 操作的插槽 -->
          <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 :eventsa="dropevents" :data="{node,data}" @addPeerNode="addPeerNode" @addNode="addNode" @editNode="editNode" @removeNode="removeNode" />
              </span>
            </div>
          </span>
        </el-tree>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16">
         <div class="rightform">
           <div class="tit-box">{{tit}}</div>
        <!-- <div class="mod-btnbox">
          <el-button type="primary" icon="el-icon-plus" @click="addModule">添加</el-button>
        </div>-->
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <!-- <el-form-item label="父級(jí)菜單" prop="parentId">
            <el-select v-model="form.parentId" placeholder="請(qǐng)選擇" class="selectw">
              <el-option v-for="parm in fmenu" :key="parm.id" :label="parm.name" :value="parm.id"></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="上級(jí)菜單">
              <treeselect
                v-model="form.id"
                :options="fmenu"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="選擇上級(jí)菜單"
              />
            </el-form-item> -->
          <el-form-item label="名稱(chēng)" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="圖標(biāo)" prop="moduleIcon">
            <el-input v-model="form.moduleIcon"></el-input>
          </el-form-item>-->
          <el-form-item label="Path" prop="path">
            <el-input v-model="form.path"></el-input>
          </el-form-item>
          <el-form-item label="Link" prop="link">
            <el-input v-model="form.link"></el-input>
          </el-form-item>
          <el-form-item label="順序" prop="sortNum">
            <el-input v-model="form.sortNum"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveModule('form')">保存</el-button>
            <el-button v-show="!form.id" type="primary" @click="reset('form')">重置</el-button>
            <!-- <el-button type="primary" v-show="showdelete" @click="deleteModule">刪除</el-button> -->
          </el-form-item>
        </el-form>
         </div>
      </el-col>
      <!-- <dot-dropdown :events="sysDropMenuEvents" :data="{node,data}" @addNode="addResource" /> -->
    </el-row>
  </div>
</template>
<script>
import {
  listCategory,
  getCategory,
  delCategory,
  addCategory,
  updateCategory,
  exportCategory,
  listCategorytree
} from "@/api/cms/category";
import DotDropdown from "./drop.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Category",
  components: {
    DotDropdown,
    Treeselect
  },
  data() {
    return {
      tit:'新建同級(jí)',
      dropevents: [
        { label: '新建同級(jí)', funcName: 'addPeerNode' },
        { label: '新建子級(jí)', funcName: 'addNode' },
        { label: '編輯', funcName: 'editNode' },
        { label: '刪除', funcName: 'removeNode' }
      ],
      showdelete: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      form: {
        id: '',
        parentId:'',
        link:"",
        path: "",
        name: "",
        sortNum: "",
      },
      // rules表單驗(yàn)證
      rules: {
        // parentId: [
        //   { required: true, message: "請(qǐng)選擇父級(jí)菜單", trigger: "blur" }
        // ],
        name: [
          { required: true, message: "請(qǐng)輸入菜單名稱(chēng)", trigger: "blur" }
        ],
        link: [{ required: true, message: "請(qǐng)輸入link", trigger: "blur" }],
        path: [{ required: true, message: "請(qǐng)輸入path", trigger: "blur" }],
        sortNum: [
          { required: true, message: "請(qǐng)輸入菜單順序", trigger: "blur" }
        ]
      },
      fmenu: [],
    };
  },
  created() {
    // this.getList();
    this.getdata();
    // this.getmenu();
    // console.log(DotDropdown, " DotDropdown,");
  },
  methods: {
    //彈框的四個(gè)操作
    //新建同級(jí)
    addPeerNode(item){
      console.log(item,'新建同級(jí)')
      this.reset('form')
      this.form.id=''
      // 這個(gè)能確保建立子級(jí)的同級(jí)
      this.form.parentId=item.node.parent.data.id
      console.log(item.node.parent.data.id,"item.node.id")
      this.tit = '新建同級(jí)'
    },
    //新建子級(jí)
    addNode(item){
      console.log(item,'新建子級(jí)')
      let id = item.data.id
      this.form.parentId = id
      this.reset('form')
      this.form.id=''
      this.tit = '新建子級(jí)'
    },
    //編輯
    editNode(item){
      console.log(item,'編輯')
      this.tit = '編輯'
      let id = item.data.id
      getCategory(id)
        .then(res => {
          console.log(res, "根據(jù)id查信息");
          this.form = res.data
          // console.log(JSON.stringify(res))
          // this.form = res.data.data
          // this.$refs.tree.setCheckedNodes([])
          // this.$refs.tree.setCheckedNodes([arr])
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("用戶(hù)管理獲取失敗，請(qǐng)稍后再試！");
        });
    },
    //刪除(ok)
    removeNode(item){
      this.tit = '刪除'
      let id = item.data.id
      // console.log(id,"kk")
      delCategory(id).then(res=>{
          this.getdata();
          this.reset('form')
          this.form.id=''
          this.tit="新建同級(jí)"
          this.$message.success("刪除成功！");
        })
        .catch(err => {
          this.$message.error("表刪除失敗，請(qǐng)稍后再試！");
      })
    },
    // 獲取數(shù)據(jù)
    getdata() {
      listCategorytree()
        .then(res => {
          this.treeData = res.categorys;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("菜單管理列表失敗，請(qǐng)稍后再試！");
        });
    },
    // 添加
    addModule() {
      // this.showdelete = false;
      this.form.link = "";
      this.form.name = "";
      this.form.path = "";
      this.form.sortNum = "";
      this.form.parentId = "";
      this.form.id = "";
    },
    // 獲取父級(jí)菜單
    // getmenu() {
    //   listCategory()
    //     .then(response => {
    //     //為啥返回的parentid不一樣
    //     response.rows.forEach(a=>{
    //       a.parentId =0
    //     })
    //     this.fmenu = [];
    //     const menu = { id: '', menuName: "主類(lèi)目", children: [] };
    //     menu.children = this.handleTree(response.rows, "id");
    //     this.fmenu.push(menu);
    //     })
    //     .catch(err => {
    //       this.loading = false;
    //       this.$message.error("父級(jí)菜單列表獲取失敗，請(qǐng)稍后再試！");
    //     });
    // },
    /** 轉(zhuǎn)換菜單數(shù)據(jù)結(jié)構(gòu) */
    // normalizer(node) {
    //   // console.log(node,"nnn")
    //   if (node.children && !node.children.length) {
    //     delete node.children;
    //   }
    //   return {
    //     id: node.id,
    //     label: node.name,
    //     children: node.children
    //   };
    // },
    // 復(fù)選變單選
    handleClick(data, checked, node) {
      if (checked) {
        // this.$refs.tree.setCheckedNodes([]);
        // this.$refs.tree.setCheckedNodes([data]);
        this.showdelete = true;
      } else {
      }
    },
    // 點(diǎn)擊節(jié)點(diǎn)
    nodeclick(arr, node, self) {
    },
    // 保存菜單
    saveModule(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          console.log(this.form,this.form.parentId,"idiidid")
          if (this.form.id != '') {
            updateCategory(this.form).then(response => {
              this.msgSuccess("修改成功");
               this.getdata();
              //  this.getmenu();
               this.reset('form')
            });
          } else {
            addCategory(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.getdata();
              // this.getmenu();
              this.reset('form')
            });
          }
        } else {
          return false;
        }
      });
    },
    // 重置
    reset(formName) {
        this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.mt30 {
  margin-bottom: 30px;
}
.el-tree-node__content {
  position: relative;
}
.el-tree-node__content :hover,
.el-tree-node__content :focus-within {
  .operate-btns {
    display: inline;
  }
}
.operate-btns {
  position: absolute;
  right: 2px;
}
//
.bg-purple {
    background: #d3dce6;
  }
  .rightform{
    border: #f1f3f7 solid 1px;
    padding: 30px 30px 20px 0px;
    box-shadow: 5px 5px 5px #cdcfcf;
    background: #fff
  }
  .lefttree{
    border: #f1f3f7 solid 1px;
    padding: 30px 30px 20px 0px;
    box-shadow: 5px 5px 5px #cdcfcf;
    background: #fff
  }
  .tit-box{
    // border-bottom: #666 solid 1px;
    text-align: center;
    width: 100%;
    /* margin: 0 auto; */
    margin-bottom: 20px;
  }
</style>

自組件drop

<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 eventsa' :key="index" :divided="index >0" @click.native="clickMenu(item)">
                {{item.label}}
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>
export default {
  props: {
    eventsa: {
      type: Array,
      default: function() {
        return [
          { label: '新建同級(jí)', funcName: 'addPeerNode' },
        { label: '新建子級(jí)', funcName: 'addNode' },
        // { label: '分配操作', funcName: 'distributeAction' },
        { label: '編輯', funcName: 'editNode' },
        { label: '刪除', funcName: 'removeNode' }
        ]
      }
    },
    // 注入數(shù)據(jù)
    data: {
      type: Object
    }
  },
  data(){
      return{
        // events2:[]  
      }
  },
  methods: {
    clickMenu(item) {
        console.log(item,"item",this.data)
      this.$emit(item.funcName, this.data)
    }
  }
}
</script>
<style scoped>
 .el-icon-more:before {
      content: "\E794";
      color: #c0c4cc;
      font-size: 15px;
}
.rotate {
      cursor: pointer;
      margin-left: 5px;
      transform: rotate(90deg);
 }
 /* .rotate:focus {
      width: 15px;
      height: 15px;
      border-radius: 4em;
      background-color: rgba(130, 132, 138, 0.2);
} */
</style>

實(shí)現(xiàn)的效果：