vue 實現(xiàn)dot-dropdown的實例代碼
更新時間：2025年06月20日 09:56:47 作者：努力往上爬de蝸牛
這篇文章主要介紹了vue實現(xiàn)dot-dropdown的相關(guān)操作,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
vue 實現(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="父級菜單" prop="parentId">
<el-select v-model="form.parentId" placeholder="請選擇" 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="上級菜單">
<treeselect
v-model="form.id"
:options="fmenu"
:normalizer="normalizer"
:show-count="true"
placeholder="選擇上級菜單"
/>
</el-form-item> -->
<el-form-item label="名稱" 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:'新建同級',
dropevents: [
{ label: '新建同級', funcName: 'addPeerNode' },
{ label: '新建子級', funcName: 'addNode' },
{ label: '編輯', funcName: 'editNode' },
{ label: '刪除', funcName: 'removeNode' }
],
showdelete: false,
treeData: [],
defaultProps: {
children: "children",
label: "label"
},
form: {
id: '',
parentId:'',
link:"",
path: "",
name: "",
sortNum: "",
},
// rules表單驗證
rules: {
// parentId: [
// { required: true, message: "請選擇父級菜單", trigger: "blur" }
// ],
name: [
{ required: true, message: "請輸入菜單名稱", trigger: "blur" }
],
link: [{ required: true, message: "請輸入link", trigger: "blur" }],
path: [{ required: true, message: "請輸入path", trigger: "blur" }],
sortNum: [
{ required: true, message: "請輸入菜單順序", trigger: "blur" }
]
},
fmenu: [],
};
},
created() {
// this.getList();
this.getdata();
// this.getmenu();
// console.log(DotDropdown, " DotDropdown,");
},
methods: {
//彈框的四個操作
//新建同級
addPeerNode(item){
console.log(item,'新建同級')
this.reset('form')
this.form.id=''
// 這個能確保建立子級的同級
this.form.parentId=item.node.parent.data.id
console.log(item.node.parent.data.id,"item.node.id")
this.tit = '新建同級'
},
//新建子級
addNode(item){
console.log(item,'新建子級')
let id = item.data.id
this.form.parentId = id
this.reset('form')
this.form.id=''
this.tit = '新建子級'
},
//編輯
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("用戶管理獲取失敗，請稍后再試！");
});
},
//刪除(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="新建同級"
this.$message.success("刪除成功！");
})
.catch(err => {
this.$message.error("表刪除失敗，請稍后再試！");
})
},
// 獲取數(shù)據(jù)
getdata() {
listCategorytree()
.then(res => {
this.treeData = res.categorys;
})
.catch(err => {
this.loading = false;
this.$message.error("菜單管理列表失敗，請稍后再試！");
});
},
// 添加
addModule() {
// this.showdelete = false;
this.form.link = "";
this.form.name = "";
this.form.path = "";
this.form.sortNum = "";
this.form.parentId = "";
this.form.id = "";
},
// 獲取父級菜單
// getmenu() {
// listCategory()
// .then(response => {
// //為啥返回的parentid不一樣
// response.rows.forEach(a=>{
// a.parentId =0
// })
// this.fmenu = [];
// const menu = { id: '', menuName: "主類目", children: [] };
// menu.children = this.handleTree(response.rows, "id");
// this.fmenu.push(menu);
// })
// .catch(err => {
// this.loading = false;
// this.$message.error("父級菜單列表獲取失敗，請稍后再試！");
// });
// },
/** 轉(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 {
}
},
// 點擊節(jié)點
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: '新建同級', funcName: 'addPeerNode' },
{ label: '新建子級', 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>實現(xiàn)的效果：
有個問題 點擊按鈕就會在頁面頂部閃現(xiàn)
teleported這個設(shè)置為false 就好了
到此這篇關(guān)于vue 實現(xiàn)dot-dropdown的文章就介紹到這了,更多相關(guān)vue dot-dropdown內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項
這篇文章主要介紹了Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中Composition的一些常見API的用法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
Vue3音頻組件開發(fā)與使用指南(包括播放控制、進(jìn)度條)
本文將詳細(xì)介紹如何在Vue3項目中開發(fā)一個功能完整的音頻播放組件,包括播放控制、進(jìn)度條、時間顯示以及多音頻實例管理等功能,本文通過實例演示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-08-08
這篇文章主要為大家詳細(xì)介紹了Vue+SSM實現(xiàn)圖片上傳預(yù)覽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
VUE中使用TypeScript裝飾器實現(xiàn)表單驗證的全過程
這篇文章主要給大家介紹了關(guān)于如何在VUE中使用TypeScript裝飾器實現(xiàn)表單驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下2023-04-04
這篇文章主要介紹了詳解Vue2.0之去掉組件click事件的native修飾,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue自定義指令實現(xiàn)彈窗拖拽四邊拉伸及對角線拉伸效果
小編最近在做一個vue前端項目，需要實現(xiàn)彈窗的拖拽，四邊拉伸及對角線拉伸，以及彈窗邊界處理功能，本文通過實例代碼給大家分享我的實現(xiàn)過程及遇到問題解決方法，感興趣的朋友一起看看吧2021-08-08
vue-cli打包后本地運行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運行dist文件中的index.html操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue和React之間如何選擇，這篇文章主要為大家詳細(xì)介紹了Vue和React兩者之間的相同之處，教大家該如何進(jìn)行選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03