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
1 <template> 1 <template>
2 <div class="tree_item_box"> 2 <div class="tree_item_box">
3 <div 3 <div
4 class="column-start-start linkLine_default" 4 class="column-start-start linkLine_default"
5 v-for="(item,s_index) in list" 5 v-for="(item, s_index) in list"
6 :key="s_index" 6 :key="s_index"
7 :class="{ 7 :class="{
8 'linkLine_first': s_index===0&list.length>1, 8 linkLine_first: (s_index === 0) & (list.length > 1),
9 'linkLine_half_top': s_index===0&&list.length===1, 9 linkLine_half_top: s_index === 0 && list.length === 1,
10 'linkLine_last': (s_index===(list.length-1)&&s_index!==0), 10 linkLine_last: s_index === list.length - 1 && s_index !== 0,
11 'third_layer':!item.children, 11 third_layer: !item.children,
12 'second_layer':item.children 12 second_layer: item.children,
13 }" 13 }"
14 > 14 >
15 <div 15 <div
16 class="row-flex-start basic_banner" 16 class="row-flex-start basic_banner"
17 @click="itemClick(item)" 17 @click="itemClick(item)"
18 :class="{ 18 :class="{
19 'active_color': item.expand 19 active_color: item.expand,
20 }" 20 }"
21 > 21 >
22 <div 22 <div
23 v-if="item.children" 23 v-if="item.children"
24 class="reTree_icon" 24 class="reTree_icon"
25 :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}" 25 :style="{
26 :class="{ 26 height: (size || 14 * 1.2) + 'px',
27 'reTree_default_icon': item.children.length===0, 27 width: (size || 14 * 1.2) + 'px',
28 'reTree_collapse_icon': item.expand && item.children.length>0, 28 }"
29 'reTree_expand_icon': !item.expand && item.children.length>0, 29 :class="{
30 }" 30 reTree_default_icon: item.children.length === 0,
31 ></div> 31 reTree_collapse_icon: item.expand && item.children.length > 0,
32 <div 32 reTree_expand_icon: !item.expand && item.children.length > 0,
33 class="layer_text nowrap" 33 }"
34 :class="{ 34 ></div>
35 'active_color': item.expand 35 <div
36 }" 36 class="layer_text nowrap"
37 >{{item.label}}</div> 37 @contextmenu.prevent="openMenu($event, item)"
38 </div> 38 :class="{
39 <line-item 39 active_color: item.expand,
40 :list="item.children" 40 }"
41 v-on="$listeners" 41 >
42 :size="size" 42 {{ item.label }}
43 v-if="item.expand&&item.children&&item.children.length>0" 43 </div>
44 ></line-item> 44 </div>
45 </div> 45 <line-item
46 </div> 46 :list="item.children"
47 v-on="$listeners"
48 :size="size"
49 v-if="item.expand && item.children && item.children.length > 0"
50 ></line-item>
51 </div>
52 </div>
47 </template> 53 </template>
48 <script> 54 <script>
49 export default { 55 export default {
50 name: "line-item", 56 name: "line-item",
51 props: { 57 props: {
52 list: { 58 list: {
53 type: Array, 59 type: Array,
54 default: () => { 60 default: () => {
55 return []; 61 return [];
56 } 62 },
57 }, 63 },
58 size: { 64 size: {
59 type: Number, 65 type: Number,
60 default: 14 66 default: 14,
61 } 67 },
62 }, 68 visible: {
63 methods: { 69 type: Boolean,
64 itemClick(item) { 70 default: false,
65 item.expand = !item.expand; 71 },
66 this.$emit("itemClick", item); 72 },
67 if (!item.children) { 73 methods: {
68 this.$emit("valClick", item); 74 itemClick(item) {
69 } 75 item.expand = !item.expand;
70 } 76 this.$emit("itemClick", item);
71 } 77 if (!item.children) {
78 this.$emit("valClick", item);
79 }
80 },
81 openMenu(e, item) {
82 if (item.isZD!=undefined) {
83 var x = e.pageX;
84 var y = e.pageY;
85 this.$emit("changeIsZD", item.isZD);
86 this.$emit("changeTop", y);
87 this.$emit("changeLeft", x);
88 this.$emit("changeVisible", true);
89 }
90 // this.top = y;
91 // this.left = x;
92 // this.visible = true;
93 },
94 closeMenu() {
95 this.$emit("changeVisible", false);
96 // this.visible = false;
97 },
98 },
99 watch: {
100 visible(value) {
101 if (value) {
102 document.body.addEventListener("click", this.closeMenu);
103 } else {
104 document.body.removeEventListener("click", this.closeMenu);
105 }
106 },
107 },
72 }; 108 };
73 </script> 109 </script>
74 <style lang='less'> 110 <style lang="less">
75 .content { 111 .content {
76 height: 100%; 112 height: 100%;
77 width: 100%; 113 width: 100%;
...@@ -96,132 +132,136 @@ export default { ...@@ -96,132 +132,136 @@ export default {
96 white-space: nowrap; 132 white-space: nowrap;
97 } 133 }
98 .active_color { 134 .active_color {
99 color: #ffffff; 135 color: #ffffff;
100 } 136 }
101 .reTree_icon { 137 .reTree_icon {
102 width: 17px; 138 width: 17px;
103 height: 17px; 139 height: 17px;
104 margin-right: 10px; 140 margin-right: 10px;
105 } 141 }
106 .no_icon { 142 .no_icon {
107 width: 17px; 143 width: 17px;
108 height: 17px; 144 height: 17px;
109 } 145 }
110 .tree_item_box { 146 .tree_item_box {
111 position: relative; 147 position: relative;
112 width: 100%; 148 width: 100%;
113 cursor: pointer; 149 cursor: pointer;
114 } 150 }
115 .basic_layer { 151 .basic_layer {
116 width: 100%; 152 width: 100%;
117 position: relative; 153 position: relative;
118 color: #FFFFFF; 154 color: #ffffff;
119 cursor: pointer; 155 cursor: pointer;
120 .layer_text { 156 .layer_text {
121 flex: 1; 157 flex: 1;
122 } 158 }
123 } 159 }
124 .first_vertical_line { 160 .first_vertical_line {
125 content: ""; 161 content: "";
126 position: absolute; 162 position: absolute;
127 width: 1px; 163 width: 1px;
128 left: 6px; 164 left: 6px;
129 top: 17px; 165 top: 17px;
130 background: #c3c5c8; 166 background: #c3c5c8;
131 } 167 }
132 .basic_banner { 168 .basic_banner {
133 position: relative; 169 position: relative;
134 width: 100%; 170 width: 100%;
135 padding-bottom: 13px; 171 padding-bottom: 13px;
136 } 172 }
137 .second_layer { 173 .second_layer {
138 position: relative; 174 position: relative;
139 width: 100%; 175 width: 100%;
140 cursor: pointer; 176 cursor: pointer;
141 padding-left: 25px; 177 padding-left: 25px;
142 } 178 }
143 .third_layer { 179 .third_layer {
144 position: relative; 180 position: relative;
145 // padding-bottom: 15px; 181 // padding-bottom: 15px;
146 width: 100%; 182 width: 100%;
147 padding-left: 40px; 183 padding-left: 40px;
148 color: #FFFFFF; 184 color: #ffffff;
149 } 185 }
150 186
151 .second_layer::before { 187 .second_layer::before {
152 content: ""; 188 content: "";
153 position: absolute; 189 position: absolute;
154 height: 1px; 190 height: 1px;
155 width: 16px; 191 width: 16px;
156 left: 9px; 192 left: 9px;
157 top: 9px; 193 top: 9px;
158 background: #c3c5c8; 194 background: #c3c5c8;
159 } 195 }
160 .third_layer::before { 196 .third_layer::before {
161 content: ""; 197 content: "";
162 position: absolute; 198 position: absolute;
163 height: 1px; 199 height: 1px;
164 width: 22px; 200 width: 22px;
165 left: 9px; 201 left: 9px;
166 top: 9px; 202 top: 9px;
167 background: #c3c5c8; 203 background: #c3c5c8;
168 } 204 }
169 205
170 .linkLine_default::after { 206 .linkLine_default::after {
171 content: ""; 207 content: "";
172 position: absolute; 208 position: absolute;
173 height: 100%; 209 height: 100%;
174 width: 1px; 210 width: 1px;
175 left: 9px; 211 left: 9px;
176 top: 0px; 212 top: 0px;
177 background: #c3c5c8; 213 background: #c3c5c8;
178 } 214 }
179 .linkLine_first::after { 215 .linkLine_first::after {
180 content: ""; 216 content: "";
181 position: absolute; 217 position: absolute;
182 /* 为了触顶 */ 218 /* 为了触顶 */
183 top: -14px; 219 top: -14px;
184 height: calc(100% + 14px); 220 height: calc(100% + 14px);
185 width: 1px; 221 width: 1px;
186 left: 9px; 222 left: 9px;
187 background: #c3c5c8; 223 background: #c3c5c8;
188 } 224 }
189 // 上半截 225 // 上半截
190 .linkLine_half_top::after { 226 .linkLine_half_top::after {
191 content: ""; 227 content: "";
192 position: absolute; 228 position: absolute;
193 height: 24px; 229 height: 24px;
194 top: -14px; 230 top: -14px;
195 width: 1px; 231 width: 1px;
196 left: 9px; 232 left: 9px;
197 background: #c3c5c8; 233 background: #c3c5c8;
198 } 234 }
199 .linkLine_last::after { 235 .linkLine_last::after {
200 content: ""; 236 content: "";
201 position: absolute; 237 position: absolute;
202 height: 9px; 238 height: 9px;
203 width: 1px; 239 width: 1px;
204 left: 9px; 240 left: 9px;
205 top: 0px; 241 top: 0px;
206 background: #c3c5c8; 242 background: #c3c5c8;
207 } 243 }
208 .reTree_collapse_icon { 244 .reTree_collapse_icon {
209 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center; 245 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
210 background-size: contain; 246 center;
247 background-size: contain;
211 } 248 }
212 249
213 .reTree_default_icon { 250 .reTree_default_icon {
214 background: url("../../assets/images/reTree_default_.svg") no-repeat center center; 251 background: url("../../assets/images/reTree_default_.svg") no-repeat center
215 background-size: contain; 252 center;
253 background-size: contain;
216 } 254 }
217 255
218 .reTree_expand_icon { 256 .reTree_expand_icon {
219 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center; 257 background: url("../../assets/images/reTree_expand_.svg") no-repeat center
220 background-size: contain; 258 center;
259 background-size: contain;
221 } 260 }
222 261
223 .reTree_focus_icon { 262 .reTree_focus_icon {
224 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center; 263 background: url("../../assets/images/reTree_focus_.svg") no-repeat center
225 background-size: contain; 264 center;
265 background-size: contain;
226 } 266 }
227 </style>
...\ No newline at end of file ...\ No newline at end of file
267 </style>
......
...@@ -144,20 +144,11 @@ export default { ...@@ -144,20 +144,11 @@ export default {
144 children: [ 144 children: [
145 { 145 {
146 label: "宗地代码1933", 146 label: "宗地代码1933",
147 children: [ 147 isZD:true
148 {
149 id:'011',
150 label: "自然幢号1256",
151 },
152 ],
153 }, 148 },
154 { 149 {
155 label: "宗地代码2100", 150 label: "自然幢2100",
156 children: [ 151 isZD:false
157 {
158 label: "自然幢号1543",
159 },
160 ],
161 }, 152 },
162 ], 153 ],
163 } 154 }
......