chenhaodong / mew-iview

Commit eccaa940bd2f68269c8fb18238c661bb598b1157

Authored by 梁灏
1 parent 172e4396

Dropdown add new trigger contextMenu

Showing 3 changed files with 69 additions and 349 deletions   Show diff stats
Inline Side-by-side
examples/routers/dropdown.vue
  Show/Hide comments   View file @eccaa94
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div>  
4 - <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >  
5 - <a href="javascript:void(0)">  
6 - right-start  
7 - <Icon type="arrow-down-b"></Icon>  
8 - </a>  
9 - <DropdownMenu slot="list">  
10 - <DropdownItem>驴打滚</DropdownItem>  
11 - <DropdownItem>炸酱面</DropdownItem>  
12 - <DropdownItem>豆汁儿</DropdownItem>  
13 - <DropdownItem>冰糖葫芦</DropdownItem>  
14 - <DropdownItem>北京烤鸭</DropdownItem>  
15 - </DropdownMenu>  
16 - </Dropdown>  
17 - <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >  
18 - <a href="javascript:void(0)">  
19 - right-end  
20 - <Icon type="arrow-down-b"></Icon>  
21 - </a>  
22 - <DropdownMenu slot="list">  
23 - <DropdownItem>驴打滚</DropdownItem>  
24 - <DropdownItem>炸酱面</DropdownItem>  
25 - <DropdownItem>豆汁儿</DropdownItem>  
26 - <DropdownItem>冰糖葫芦</DropdownItem>  
27 - <DropdownItem>北京烤鸭</DropdownItem>  
28 - </DropdownMenu>  
29 - </Dropdown>  
30 -  
31 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >  
32 - <a href="javascript:void(0)">  
33 - bottom-start  
34 - <Icon type="arrow-down-b"></Icon>  
35 - </a>  
36 - <DropdownMenu slot="list">  
37 - <DropdownItem>驴打滚</DropdownItem>  
38 - <DropdownItem>炸酱面</DropdownItem>  
39 - <DropdownItem>豆汁儿</DropdownItem>  
40 - <DropdownItem>冰糖葫芦</DropdownItem>  
41 - <DropdownItem>北京烤鸭</DropdownItem>  
42 - </DropdownMenu>  
43 - </Dropdown>  
44 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >  
45 - <a href="javascript:void(0)">  
46 - bottom-end  
47 - <Icon type="arrow-down-b"></Icon>  
48 - </a>  
49 - <DropdownMenu slot="list">  
50 - <DropdownItem>驴打滚</DropdownItem>  
51 - <DropdownItem>炸酱面</DropdownItem>  
52 - <DropdownItem>豆汁儿</DropdownItem>  
53 - <DropdownItem>冰糖葫芦</DropdownItem>  
54 - <DropdownItem>北京烤鸭</DropdownItem>  
55 - </DropdownMenu>  
56 - </Dropdown>  
57 -  
58 - <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >  
59 - <a href="javascript:void(0)">  
60 - top-start  
61 - <Icon type="arrow-down-b"></Icon>  
62 - </a>  
63 - <DropdownMenu slot="list">  
64 - <DropdownItem>驴打滚</DropdownItem>  
65 - <DropdownItem>炸酱面</DropdownItem>  
66 - <DropdownItem>豆汁儿</DropdownItem>  
67 - <DropdownItem>冰糖葫芦</DropdownItem>  
68 - <DropdownItem>北京烤鸭</DropdownItem>  
69 - </DropdownMenu>  
70 - </Dropdown>  
71 - <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >  
72 - <a href="javascript:void(0)">  
73 - top-end  
74 - <Icon type="arrow-down-b"></Icon>  
75 - </a>  
76 - <DropdownMenu slot="list">  
77 - <DropdownItem>驴打滚</DropdownItem>  
78 - <DropdownItem>炸酱面</DropdownItem>  
79 - <DropdownItem>豆汁儿</DropdownItem>  
80 - <DropdownItem>冰糖葫芦</DropdownItem>  
81 - <DropdownItem>北京烤鸭</DropdownItem>  
82 - </DropdownMenu>  
83 - </Dropdown>  
84 -  
85 - <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >  
86 - <a href="javascript:void(0)">  
87 - left-start  
88 - <Icon type="arrow-down-b"></Icon>  
89 - </a>  
90 - <DropdownMenu slot="list">  
91 - <DropdownItem>驴打滚</DropdownItem>  
92 - <DropdownItem>炸酱面</DropdownItem>  
93 - <DropdownItem>豆汁儿</DropdownItem>  
94 - <DropdownItem>冰糖葫芦</DropdownItem>  
95 - <DropdownItem>北京烤鸭</DropdownItem>  
96 - </DropdownMenu>  
97 - </Dropdown>  
98 -  
99 - <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >  
100 - <a href="javascript:void(0)">  
101 - left-end  
102 - <Icon type="arrow-down-b"></Icon>  
103 - </a>  
104 - <DropdownMenu slot="list">  
105 - <DropdownItem>驴打滚</DropdownItem>  
106 - <DropdownItem>炸酱面</DropdownItem>  
107 - <DropdownItem>豆汁儿</DropdownItem>  
108 - <DropdownItem>冰糖葫芦</DropdownItem>  
109 - <DropdownItem>北京烤鸭</DropdownItem>  
110 - </DropdownMenu>  
111 - </Dropdown>  
112 -  
113 - <Dropdown trigger="click" style="margin-left: 20px" placement="top" >  
114 - <a href="javascript:void(0)">  
115 - top  
116 - <Icon type="arrow-down-b"></Icon>  
117 - </a>  
118 - <DropdownMenu slot="list">  
119 - <DropdownItem>驴打滚</DropdownItem>  
120 - <DropdownItem>炸酱面</DropdownItem>  
121 - <DropdownItem>豆汁儿</DropdownItem>  
122 - <DropdownItem>冰糖葫芦</DropdownItem>  
123 - <DropdownItem>北京烤鸭</DropdownItem>  
124 - </DropdownMenu>  
125 - </Dropdown>  
126 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >  
127 - <a href="javascript:void(0)">  
128 - bottom  
129 - <Icon type="arrow-down-b"></Icon>  
130 - </a>  
131 - <DropdownMenu slot="list">  
132 - <DropdownItem>驴打滚</DropdownItem>  
133 - <DropdownItem>炸酱面</DropdownItem>  
134 - <DropdownItem>豆汁儿</DropdownItem>  
135 - <DropdownItem>冰糖葫芦</DropdownItem>  
136 - <DropdownItem>北京烤鸭</DropdownItem>  
137 - </DropdownMenu>  
138 - </Dropdown>  
139 - <Dropdown trigger="click" style="margin-left: 20px" placement="left" >  
140 - <a href="javascript:void(0)">  
141 - left  
142 - <Icon type="arrow-down-b"></Icon>  
143 - </a>  
144 - <DropdownMenu slot="list">  
145 - <DropdownItem>驴打滚</DropdownItem>  
146 - <DropdownItem>炸酱面</DropdownItem>  
147 - <DropdownItem>豆汁儿</DropdownItem>  
148 - <DropdownItem>冰糖葫芦</DropdownItem>  
149 - <DropdownItem>北京烤鸭</DropdownItem>  
150 - <DropdownItem>驴打滚</DropdownItem>  
151 - <DropdownItem>炸酱面</DropdownItem>  
152 - <DropdownItem>豆汁儿</DropdownItem>  
153 - <DropdownItem>冰糖葫芦</DropdownItem>  
154 - <DropdownItem>北京烤鸭</DropdownItem>  
155 - <DropdownItem>驴打滚</DropdownItem>  
156 - <DropdownItem>炸酱面</DropdownItem>  
157 - <DropdownItem>豆汁儿</DropdownItem>  
158 - <DropdownItem>冰糖葫芦</DropdownItem>  
159 - <DropdownItem>北京烤鸭</DropdownItem>  
160 - </DropdownMenu>  
161 - </Dropdown>  
162 - <Dropdown trigger="click" style="margin-left: 20px" placement="right" >  
163 - <a href="javascript:void(0)">  
164 - right  
165 - <Icon type="arrow-down-b"></Icon>  
166 - </a>  
167 - <DropdownMenu slot="list">  
168 - <DropdownItem>驴打滚</DropdownItem>  
169 - <DropdownItem>炸酱面</DropdownItem>  
170 - <DropdownItem>豆汁儿</DropdownItem>  
171 - <DropdownItem>冰糖葫芦</DropdownItem>  
172 - <DropdownItem>北京烤鸭</DropdownItem>  
173 - </DropdownMenu>  
174 - </Dropdown>  
175 - </div>  
176 - <br><br><br><br>  
177 - <div style='width:600px;height:100px;overflow: auto;border:1px solid'>  
178 - <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >  
179 - <a href="javascript:void(0)">  
180 - right-start  
181 - <Icon type="arrow-down-b"></Icon>  
182 - </a>  
183 - <DropdownMenu slot="list">  
184 - <DropdownItem>驴打滚</DropdownItem>  
185 - <DropdownItem>炸酱面</DropdownItem>  
186 - <DropdownItem>豆汁儿</DropdownItem>  
187 - <DropdownItem>冰糖葫芦</DropdownItem>  
188 - <DropdownItem>北京烤鸭</DropdownItem>  
189 - </DropdownMenu>  
190 - </Dropdown>  
191 - <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >  
192 - <a href="javascript:void(0)">  
193 - right-end  
194 - <Icon type="arrow-down-b"></Icon>  
195 - </a>  
196 - <DropdownMenu slot="list">  
197 - <DropdownItem>驴打滚</DropdownItem>  
198 - <DropdownItem>炸酱面</DropdownItem>  
199 - <DropdownItem>豆汁儿</DropdownItem>  
200 - <DropdownItem>冰糖葫芦</DropdownItem>  
201 - <DropdownItem>北京烤鸭</DropdownItem>  
202 - </DropdownMenu>  
203 - </Dropdown>  
204 -  
205 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >  
206 - <a href="javascript:void(0)">  
207 - bottom-start  
208 - <Icon type="arrow-down-b"></Icon>  
209 - </a>  
210 - <DropdownMenu slot="list">  
211 - <DropdownItem>驴打滚</DropdownItem>  
212 - <DropdownItem>炸酱面</DropdownItem>  
213 - <DropdownItem>豆汁儿</DropdownItem>  
214 - <DropdownItem>冰糖葫芦</DropdownItem>  
215 - <DropdownItem>北京烤鸭</DropdownItem>  
216 - </DropdownMenu>  
217 - </Dropdown>  
218 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >  
219 - <a href="javascript:void(0)">  
220 - bottom-end  
221 - <Icon type="arrow-down-b"></Icon>  
222 - </a>  
223 - <DropdownMenu slot="list">  
224 - <DropdownItem>驴打滚</DropdownItem>  
225 - <DropdownItem>炸酱面</DropdownItem>  
226 - <DropdownItem>豆汁儿</DropdownItem>  
227 - <DropdownItem>冰糖葫芦</DropdownItem>  
228 - <DropdownItem>北京烤鸭</DropdownItem>  
229 - </DropdownMenu>  
230 - </Dropdown>  
231 -  
232 - <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >  
233 - <a href="javascript:void(0)">  
234 - top-start  
235 - <Icon type="arrow-down-b"></Icon>  
236 - </a>  
237 - <DropdownMenu slot="list">  
238 - <DropdownItem>驴打滚</DropdownItem>  
239 - <DropdownItem>炸酱面</DropdownItem>  
240 - <DropdownItem>豆汁儿</DropdownItem>  
241 - <DropdownItem>冰糖葫芦</DropdownItem>  
242 - <DropdownItem>北京烤鸭</DropdownItem>  
243 - </DropdownMenu>  
244 - </Dropdown>  
245 - <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >  
246 - <a href="javascript:void(0)">  
247 - top-end  
248 - <Icon type="arrow-down-b"></Icon>  
249 - </a>  
250 - <DropdownMenu slot="list">  
251 - <DropdownItem>驴打滚</DropdownItem>  
252 - <DropdownItem>炸酱面</DropdownItem>  
253 - <DropdownItem>豆汁儿</DropdownItem>  
254 - <DropdownItem>冰糖葫芦</DropdownItem>  
255 - <DropdownItem>北京烤鸭</DropdownItem>  
256 - </DropdownMenu>  
257 - </Dropdown>  
258 -  
259 - <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >  
260 - <a href="javascript:void(0)">  
261 - left-start  
262 - <Icon type="arrow-down-b"></Icon>  
263 - </a>  
264 - <DropdownMenu slot="list">  
265 - <DropdownItem>驴打滚</DropdownItem>  
266 - <DropdownItem>炸酱面</DropdownItem>  
267 - <DropdownItem>豆汁儿</DropdownItem>  
268 - <DropdownItem>冰糖葫芦</DropdownItem>  
269 - <DropdownItem>北京烤鸭</DropdownItem>  
270 - </DropdownMenu>  
271 - </Dropdown>  
272 -  
273 - <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >  
274 - <a href="javascript:void(0)">  
275 - left-end  
276 - <Icon type="arrow-down-b"></Icon>  
277 - </a>  
278 - <DropdownMenu slot="list">  
279 - <DropdownItem>驴打滚</DropdownItem>  
280 - <DropdownItem>炸酱面</DropdownItem>  
281 - <DropdownItem>豆汁儿</DropdownItem>  
282 - <DropdownItem>冰糖葫芦</DropdownItem>  
283 - <DropdownItem>北京烤鸭</DropdownItem>  
284 - </DropdownMenu>  
285 - </Dropdown>  
286 -  
287 - <Dropdown trigger="click" style="margin-left: 20px" placement="top" >  
288 - <a href="javascript:void(0)">  
289 - top  
290 - <Icon type="arrow-down-b"></Icon>  
291 - </a>  
292 - <DropdownMenu slot="list">  
293 - <DropdownItem>驴打滚</DropdownItem>  
294 - <DropdownItem>炸酱面</DropdownItem>  
295 - <DropdownItem>豆汁儿</DropdownItem>  
296 - <DropdownItem>冰糖葫芦</DropdownItem>  
297 - <DropdownItem>北京烤鸭</DropdownItem>  
298 - </DropdownMenu>  
299 - </Dropdown>  
300 - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >  
301 - <a href="javascript:void(0)">  
302 - bottom  
303 - <Icon type="arrow-down-b"></Icon>  
304 - </a>  
305 - <DropdownMenu slot="list">  
306 - <DropdownItem>驴打滚</DropdownItem>  
307 - <DropdownItem>炸酱面</DropdownItem>  
308 - <DropdownItem>豆汁儿</DropdownItem>  
309 - <DropdownItem>冰糖葫芦</DropdownItem>  
310 - <DropdownItem>北京烤鸭</DropdownItem>  
311 - </DropdownMenu>  
312 - </Dropdown>  
313 - <Dropdown trigger="click" style="margin-left: 20px" placement="left" >  
314 - <a href="javascript:void(0)">  
315 - left  
316 - <Icon type="arrow-down-b"></Icon>  
317 - </a>  
318 - <DropdownMenu slot="list">  
319 - <DropdownItem>驴打滚</DropdownItem>  
320 - <DropdownItem>炸酱面</DropdownItem>  
321 - <DropdownItem>豆汁儿</DropdownItem>  
322 - <DropdownItem>冰糖葫芦</DropdownItem>  
323 - <DropdownItem>北京烤鸭</DropdownItem>  
324 - <DropdownItem>驴打滚</DropdownItem>  
325 - <DropdownItem>炸酱面</DropdownItem>  
326 - <DropdownItem>豆汁儿</DropdownItem>  
327 - <DropdownItem>冰糖葫芦</DropdownItem>  
328 - <DropdownItem>北京烤鸭</DropdownItem>  
329 - <DropdownItem>驴打滚</DropdownItem>  
330 - <DropdownItem>炸酱面</DropdownItem>  
331 - <DropdownItem>豆汁儿</DropdownItem>  
332 - <DropdownItem>冰糖葫芦</DropdownItem>  
333 - <DropdownItem>北京烤鸭</DropdownItem>  
334 - </DropdownMenu>  
335 - </Dropdown>  
336 - <Dropdown trigger="click" style="margin-left: 20px" placement="right" >  
337 - <a href="javascript:void(0)">  
338 - right  
339 - <Icon type="arrow-down-b"></Icon>  
340 - </a>  
341 - <DropdownMenu slot="list">  
342 - <DropdownItem>驴打滚</DropdownItem>  
343 - <DropdownItem>炸酱面</DropdownItem>  
344 - <DropdownItem>豆汁儿</DropdownItem>  
345 - <DropdownItem>冰糖葫芦</DropdownItem>  
346 - <DropdownItem>北京烤鸭</DropdownItem>  
347 - </DropdownMenu>  
348 - </Dropdown>  
349 - </div> 3 + <Dropdown trigger="hover">
  4 + <a href="javascript:void(0)">
  5 + 下拉菜单
  6 + <Icon type="ios-arrow-down"></Icon>
  7 + </a>
  8 + <DropdownMenu slot="list">
  9 + <DropdownItem>驴打滚</DropdownItem>
  10 + <DropdownItem>炸酱面</DropdownItem>
  11 + <DropdownItem disabled>豆汁儿</DropdownItem>
  12 + <DropdownItem>冰糖葫芦</DropdownItem>
  13 + <DropdownItem divided>北京烤鸭</DropdownItem>
  14 + </DropdownMenu>
  15 + </Dropdown>
  16 + <Dropdown trigger="click">
  17 + <a href="javascript:void(0)">
  18 + 下拉菜单
  19 + <Icon type="ios-arrow-down"></Icon>
  20 + </a>
  21 + <DropdownMenu slot="list">
  22 + <DropdownItem>驴打滚</DropdownItem>
  23 + <DropdownItem>炸酱面</DropdownItem>
  24 + <DropdownItem disabled>豆汁儿</DropdownItem>
  25 + <DropdownItem>冰糖葫芦</DropdownItem>
  26 + <DropdownItem divided>北京烤鸭</DropdownItem>
  27 + </DropdownMenu>
  28 + </Dropdown>
  29 + <Dropdown trigger="contextMenu">
  30 + <a href="javascript:void(0)">
  31 + 下拉菜单
  32 + <Icon type="ios-arrow-down"></Icon>
  33 + </a>
  34 + <DropdownMenu slot="list">
  35 + <DropdownItem>驴打滚</DropdownItem>
  36 + <DropdownItem>炸酱面</DropdownItem>
  37 + <DropdownItem disabled>豆汁儿</DropdownItem>
  38 + <DropdownItem>冰糖葫芦</DropdownItem>
  39 + <DropdownItem divided>北京烤鸭</DropdownItem>
  40 + </DropdownMenu>
  41 + </Dropdown>
350 </div> 42 </div>
351 </template> 43 </template>
352 <script> 44 <script>
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @eccaa94
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 v-click-outside="onClickoutside" 4 v-click-outside="onClickoutside"
5 @mouseenter="handleMouseenter" 5 @mouseenter="handleMouseenter"
6 @mouseleave="handleMouseleave"> 6 @mouseleave="handleMouseleave">
7 - <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div> 7 + <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
8 <transition name="transition-drop"> 8 <transition name="transition-drop">
9 <Drop 9 <Drop
10 :class="dropdownCls" 10 :class="dropdownCls"
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 props: { 33 props: {
34 trigger: { 34 trigger: {
35 validator (value) { 35 validator (value) {
36 - return oneOf(value, ['click', 'hover', 'custom']); 36 + return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
37 }, 37 },
38 default: 'hover' 38 default: 'hover'
39 }, 39 },
@@ -60,6 +60,14 @@ @@ -60,6 +60,14 @@
60 return { 60 return {
61 [prefixCls + '-transfer']: this.transfer 61 [prefixCls + '-transfer']: this.transfer
62 }; 62 };
  63 + },
  64 + relClasses () {
  65 + return [
  66 + `${prefixCls}-rel`,
  67 + {
  68 + [`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
  69 + }
  70 + ];
63 } 71 }
64 }, 72 },
65 data () { 73 data () {
@@ -89,6 +97,13 @@ @@ -89,6 +97,13 @@
89 } 97 }
90 this.currentVisible = !this.currentVisible; 98 this.currentVisible = !this.currentVisible;
91 }, 99 },
  100 + handleRightClick () {
  101 + if (this.trigger === 'custom') return false;
  102 + if (this.trigger !== 'contextMenu') {
  103 + return false;
  104 + }
  105 + this.currentVisible = !this.currentVisible;
  106 + },
92 handleMouseenter () { 107 handleMouseenter () {
93 if (this.trigger === 'custom') return false; 108 if (this.trigger === 'custom') return false;
94 if (this.trigger !== 'hover') { 109 if (this.trigger !== 'hover') {
@@ -113,6 +128,7 @@ @@ -113,6 +128,7 @@
113 }, 128 },
114 onClickoutside (e) { 129 onClickoutside (e) {
115 this.handleClose(); 130 this.handleClose();
  131 + this.handleRightClose();
116 if (this.currentVisible) this.$emit('on-clickoutside', e); 132 if (this.currentVisible) this.$emit('on-clickoutside', e);
117 }, 133 },
118 handleClose () { 134 handleClose () {
@@ -122,6 +138,13 @@ @@ -122,6 +138,13 @@
122 } 138 }
123 this.currentVisible = false; 139 this.currentVisible = false;
124 }, 140 },
  141 + handleRightClose () {
  142 + if (this.trigger === 'custom') return false;
  143 + if (this.trigger !== 'contextMenu') {
  144 + return false;
  145 + }
  146 + this.currentVisible = false;
  147 + },
125 hasParent () { 148 hasParent () {
126 // const $parent = this.$parent.$parent.$parent; 149 // const $parent = this.$parent.$parent.$parent;
127 const $parent = findComponentUpward(this, 'Dropdown'); 150 const $parent = findComponentUpward(this, 'Dropdown');
src/styles/components/dropdown.less
  Show/Hide comments   View file @eccaa94
@@ -16,6 +16,11 @@ @@ -16,6 +16,11 @@
16 &-rel{ 16 &-rel{
17 //display: inline-block; 17 //display: inline-block;
18 position: relative; 18 position: relative;
  19 + &-user-select-none{
  20 + -webkit-user-select: none;
  21 + -moz-user-select: none;
  22 + user-select: none;
  23 + }
19 } 24 }
20 25
21 &-menu{ 26 &-menu{