Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
05c5cd69 by 杨威
Options

目录树自定义右键菜单

1 parent b325d556
Expand all
Inline Side-by-side
Showing 3 changed files with 197 additions and 166 deletions
<template>
<div class="tree_item_box">
<div
class="column-start-start linkLine_default"
v-for="(item,s_index) in list"
:key="s_index"
:class="{
'linkLine_first': s_index===0&list.length>1,
'linkLine_half_top': s_index===0&&list.length===1,
'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
'third_layer':!item.children,
'second_layer':item.children
}"
>
<div
class="row-flex-start basic_banner"
@click="itemClick(item)"
:class="{
'active_color': item.expand
}"
>
<div
v-if="item.children"
class="reTree_icon"
:style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div
class="layer_text nowrap"
:class="{
'active_color': item.expand
}"
>{{item.label}}</div>
</div>
<line-item
:list="item.children"
v-on="$listeners"
:size="size"
v-if="item.expand&&item.children&&item.children.length>0"
></line-item>
</div>
</div>
<div class="tree_item_box">
<div
class="column-start-start linkLine_default"
v-for="(item, s_index) in list"
:key="s_index"
:class="{
linkLine_first: (s_index === 0) & (list.length > 1),
linkLine_half_top: s_index === 0 && list.length === 1,
linkLine_last: s_index === list.length - 1 && s_index !== 0,
third_layer: !item.children,
second_layer: item.children,
}"
>
<div
class="row-flex-start basic_banner"
@click="itemClick(item)"
:class="{
active_color: item.expand,
}"
>
<div
v-if="item.children"
class="reTree_icon"
:style="{
height: (size || 14 * 1.2) + 'px',
width: (size || 14 * 1.2) + 'px',
}"
:class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: item.expand && item.children.length > 0,
reTree_expand_icon: !item.expand && item.children.length > 0,
}"
></div>
<div
class="layer_text nowrap"
@contextmenu.prevent="openMenu($event, item)"
:class="{
active_color: item.expand,
}"
>
{{ item.label }}
</div>
</div>
<line-item
:list="item.children"
v-on="$listeners"
:size="size"
v-if="item.expand && item.children && item.children.length > 0"
></line-item>
</div>
</div>
</template>
<script>
export default {
name: "line-item",
props: {
list: {
type: Array,
default: () => {
return [];
}
},
size: {
type: Number,
default: 14
}
},
methods: {
itemClick(item) {
item.expand = !item.expand;
this.$emit("itemClick", item);
if (!item.children) {
this.$emit("valClick", item);
}
}
}
name: "line-item",
props: {
list: {
type: Array,
default: () => {
return [];
},
},
size: {
type: Number,
default: 14,
},
visible: {
type: Boolean,
default: false,
},
},
methods: {
itemClick(item) {
item.expand = !item.expand;
this.$emit("itemClick", item);
if (!item.children) {
this.$emit("valClick", item);
}
},
openMenu(e, item) {
if (item.isZD!=undefined) {
var x = e.pageX;
var y = e.pageY;
this.$emit("changeIsZD", item.isZD);
this.$emit("changeTop", y);
this.$emit("changeLeft", x);
this.$emit("changeVisible", true);
}
// this.top = y;
// this.left = x;
// this.visible = true;
},
closeMenu() {
this.$emit("changeVisible", false);
// this.visible = false;
},
},
watch: {
visible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
},
};
</script>
<style lang='less'>
<style lang="less">
.content {
height: 100%;
width: 100%;
......@@ -96,132 +132,136 @@ export default {
white-space: nowrap;
}
.active_color {
color: #ffffff;
color: #ffffff;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 10px;
width: 17px;
height: 17px;
margin-right: 10px;
}
.no_icon {
width: 17px;
height: 17px;
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
position: relative;
width: 100%;
cursor: pointer;
}
.basic_layer {
width: 100%;
position: relative;
color: #FFFFFF;
cursor: pointer;
.layer_text {
flex: 1;
}
width: 100%;
position: relative;
color: #ffffff;
cursor: pointer;
.layer_text {
flex: 1;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 100%;
padding-bottom: 13px;
position: relative;
width: 100%;
padding-bottom: 13px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.third_layer {
position: relative;
// padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #FFFFFF;
position: relative;
// padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #ffffff;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.third_layer::before {
content: "";
position: absolute;
height: 1px;
width: 22px;
left: 9px;
top: 9px;
background: #c3c5c8;
content: "";
position: absolute;
height: 1px;
width: 22px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
background-size: contain;
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
background: url("../../assets/images/reTree_default_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
background-size: contain;
background: url("../../assets/images/reTree_expand_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
background: url("../../assets/images/reTree_focus_.svg") no-repeat center
center;
background-size: contain;
}
</style>
\ No newline at end of file
</style>
......
......@@ -144,20 +144,11 @@ export default {
children: [
{
label: "宗地代码1933",
children: [
{
id:'011',
label: "自然幢号1256",
},
],
isZD:true
},
{
label: "宗地代码2100",
children: [
{
label: "自然幢号1543",
},
],
label: "自然幢2100",
isZD:false
},
],
}
......