1. 酷炫的导航效果
https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-15
2. 树形结构图
树形架构的使用
解释说明
在使用的基础上新增了增删改查的功能 ————基于element UI
参考文档
https://segmentfault.com/a/1190000022344711
demo
/* 布局树控件 */
<template>
<drag-and-resize
:domId="domId"
:vtype="vtype"
:buttonDepend="buttonDepend"
:dragOrigin="dragOrigin"
:rect="rect"
>
<div
class="shitushuClass"
:style="{
width:layoutData.styleoption.attribute.width.value,
height:layoutData.styleoption.attribute.height.value,
}"
>
<vue2-org-tree
:data="data"
:horizontal="layoutData.styleoption.attribute.horizontal.value"
:label-class-name="labelClassName"
collapsable
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="NodeClick"
/>
</div>
</drag-and-resize>
</template>
<script type="text/ecmascript-6">
import Vue2OrgTree from 'vue2-org-tree'
import baseComponent from "../base";
import attributeJson from "./attribute.json"; // 引入组件独有的配置文件
//var editerTree = null;
export default {
name: "shitushu",
extends: baseComponent,
props: ["domId", "getThis", "recoverData"],
components: {
Vue2OrgTree,
},
data() {
return {
componentJson: attributeJson,
horizontal: true, //排列方式
labelClassName: "bg-color-orange",
data: {
id: 0,
label: "XXX科技有限公司",
children: [
{
id: 2,
label: "产品研发部",
children: [
{
id: 5,
label: "研发-前端",
children:[]
},
{
id: 6,
label: "研发-后端",
children:[]
},
{
id: 9,
label: "UI设计",
children:[]
},
{
id: 10,
label: "产品经理",
children:[]
}
]
},
{
id: 3,
label: "销售部",
children: [
{
id: 7,
label: "销售一部",
children:[]
},
{
id: 8,
label: "销售二部",
children:[]
}
]
},
{
id: 4,
label: "财务部",
children:[]
},
{
id: 9,
label: "HR人事",
children:[]
}
]
},
vtype: "shitushu",
dependIndex: 2,
imgUrl: "bingtu.png"
};
},
mounted() {
this.changeLayoutDataToFrom();
const _this = this;
this.getThis(this.domId, _this);
this.toggleExpand(this.data, true);
this.rect.resizable = false;
},
methods: {
/* 布局树点击事件 */
collapse(list) {
var _this = this;
list.forEach(function(child) {
if (child.expand) {
child.expand = false;
}
child.children && _this.collapse(child.children);
});
},
onExpand(e, data) {
if ("expand" in data) {
data.expand = !data.expand;
if (!data.expand && data.children) {
this.collapse(data.children);
}
} else {
this.$set(data, "expand", true);
}
},
toggleExpand(data, val) {
var _this = this;
if (Array.isArray(data)) {
data.forEach(function(item) {
_this.$set(item, "expand", val);
if (item.children) {
_this.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
_this.toggleExpand(data.children, val);
}
}
},
NodeClick(e, data) {
},
renderContent(h, data) {
return (<div>
<el-dropdown trigger="click" oncommand= {(v) => this.TreeClick(v, data)}>
<span class="el-dropdown-link">
{data.label}
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addBottomLevel">添加子节点</el-dropdown-item>
<el-dropdown-item command="changeLevel">修改节点</el-dropdown-item>
<el-dropdown-item command="deleteLevel">删除节点</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>);
},
TreeClick(command,node){
if(command==='addLevel'){
this.addLevelItem(node)
}else if(command==='addBottomLevel'){
this.addBottomLevelItem(node)
}else if (command==='changeLevel'){
this.editeTreeItem(node)
}else if(command==='deleteLevel'){
this.deleteTreeItem(node)
}
},
/* 删除节点操作 */
deleteTreeItem(node) {
const id = node.id;
this.doDelete(this.data.children,id)
},
doDelete (treeData,id){
for(var i = treeData.length ; i > 0 ; i--){
if(treeData[i-1].id == id){
treeData.splice(i-1,1);
}else{
if(treeData[i-1].children){
this.doDelete(treeData[i-1].children,id)
}
}
}
},
addLevelItem(node) {
},
addBottomLevelItem(node) {
this.$prompt('请输入名称', '添加子节点', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
const item = {label:value,id:Date.now(),children:[],}
if(node.children){node.children.push(item);}
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
editeTreeItem(node) {
this.$prompt('请输入名称', '修改名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
node.label=value;
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
resize(){},
/* itemList(data, id) {
let itemList = [];
if (data.id === id) {
return "";
} else {
itemList.push("data");
for (let index = 0; index < itemList.length; index++) {
const element = array[index];
}
}
} */
},
watch: {
"layoutData.styleoption.attribute.style.value": {
handler(newV) {
},
deep: true
},
'layoutData.styleoption.attribute.width.value'(val){
this.rect.width = parseInt(val)
},
'layoutData.styleoption.attribute.height.value'(val){
this.rect.height = parseInt(val)
},
"data":{
handler(newV) {
},
deep: true
}
}
};
</script>
<style lang="less">
.shitushuClass {
display: flex;
overflow: auto;
.bg-color-orange {
color: #fff;
background-color: orange;
}
}
#editerTree_k {
/* visibility: hidden;
width: 100px;
height: 120px;
background-color: rgb(216, 219, 218);
position: absolute;
left: 20px;
top: 10px;
text-align: left;
line-height: 30px;
z-index: 11; */
}
.org-tree-container {
background-color: transparent;
}
</style>
