+93
-22
lines changedFilter options
+93
-22
lines changed Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
1 1
<example src="./examples/Directions.vue" />
2 2
<example src="./examples/Sizes.vue" />
3 3
<example src="./examples/MenuAlignments.vue" />
4 +
<example src="./examples/AutoClose.vue" />
4 5
<example src="./examples/MultipleContent.vue" />
5 6 6 7
<template>
@@ -33,6 +34,13 @@
33 34
<note-block>The max-width of a menu is 280px.</note-block>
34 35
</div>
35 36 37 +
<div class="page-container-section">
38 +
<h2>AutoClose</h2>
39 + 40 +
<p><code>md-menu</code> can be auto closed on click or select:</p>
41 +
<code-example title="Auto close menu on events" :component="examples['auto-close']" />
42 +
</div>
43 + 36 44
<div class="page-container-section">
37 45
<h2>Rich Content and Icon Alignment</h2>
38 46
@@ -71,6 +79,12 @@
71 79
description: 'Used to show/hide a menu programatically.',
72 80
defaults: 'false'
73 81
},
82 +
{
83 +
name: 'md-close-on-click',
84 +
type: 'Boolean',
85 +
description: 'When this options is true, the menu will be closed after any click event.',
86 +
defaults: 'false'
87 +
},
74 88
{
75 89
name: 'md-close-on-select',
76 90
type: 'Boolean',
@@ -0,0 +1,41 @@
1 +
<template>
2 +
<div>
3 +
<div>
4 +
<md-checkbox :value="true" v-model="closeOnClick">closeOnClick</md-checkbox>
5 +
<md-checkbox :value="true" v-model="closeOnSelect">closeOnSelect</md-checkbox>
6 +
</div>
7 +
<div>
8 +
<md-menu md-direction="bottom-end" :mdCloseOnClick="closeOnClick" :mdCloseOnSelect="closeOnSelect">
9 +
<md-button md-menu-trigger>Bottom End</md-button>
10 + 11 +
<md-menu-content>
12 +
<md-menu-item disabled @click="data = 'click disabled'">Disabled</md-menu-item>
13 +
<md-menu-item @click="data = 'click 1'">Click Event 1</md-menu-item>
14 +
<md-menu-item @click="data = 'click 2'">Click Event 2</md-menu-item>
15 +
<md-menu-item>Plain text</md-menu-item>
16 +
</md-menu-content>
17 +
</md-menu>
18 +
</div>
19 +
<div>{{data}}</div>
20 +
</div>
21 +
</template>
22 + 23 +
<script>
24 +
export default {
25 +
name: 'AutoClose',
26 + 27 +
data () {
28 +
return {
29 +
data: '',
30 +
closeOnClick: false,
31 +
closeOnSelect: true
32 +
}
33 +
}
34 +
}
35 +
</script>
36 + 37 +
<style lang="scss" scoped>
38 +
.md-menu {
39 +
margin: 24px;
40 +
}
41 +
</style>
Original file line number Diff line number Diff line change
@@ -30,6 +30,10 @@
30 30
type: Boolean,
31 31
default: true
32 32
},
33 +
mdCloseOnClick: {
34 +
type: Boolean,
35 +
default: false
36 +
},
33 37
mdSize: {
34 38
type: String,
35 39
default: 'small',
@@ -56,6 +60,7 @@
56 60
fullWidth: this.mdFullWidth,
57 61
dense: this.mdDense,
58 62
closeOnSelect: this.mdCloseOnSelect,
63 +
closeOnClick: this.mdCloseOnClick,
59 64
bodyClickObserver: null,
60 65
windowResizeObserver: null,
61 66
$el: this.$el
@@ -102,6 +107,12 @@
102 107
} else {
103 108
this.$emit('md-opened')
104 109
}
110 +
},
111 +
mdCloseOnSelect () {
112 +
this.MdMenu.closeOnSelect = this.mdCloseOnSelect
113 +
},
114 +
mdCloseOnClick () {
115 +
this.MdMenu.closeOnClick = this.mdCloseOnClick
105 116
}
106 117
},
107 118
methods: {
@@ -199,7 +199,8 @@
199 199
$event.stopPropagation()
200 200
let isMdMenu = this.MdMenu.$el ? this.MdMenu.$el.contains($event.target) : false
201 201
let isMenuContentEl = this.$refs.menu ? this.$refs.menu.contains($event.target) : false
202 -
if (!this.$el.contains($event.target) && !isMdMenu && !isMenuContentEl) {
202 +
let onBackdropExpectMenu = !this.$el.contains($event.target) && !isMenuContentEl
203 +
if (!isMdMenu && (this.MdMenu.closeOnClick || onBackdropExpectMenu)) {
203 204
this.MdMenu.active = false
204 205
this.MdMenu.bodyClickObserver.destroy()
205 206
this.MdMenu.windowResizeObserver.destroy()
@@ -16,14 +16,38 @@
16 16
},
17 17
inject: ['MdMenu'],
18 18
data: () => ({
19 -
listeners: {},
20 19
highlighted: false
21 20
}),
22 21
computed: {
23 22
itemClasses () {
24 23
return {
25 24
'md-highlight': this.highlighted
26 25
}
26 +
},
27 +
listeners () {
28 +
if (this.disabled) {
29 +
return {}
30 +
}
31 + 32 +
if (!this.MdMenu.closeOnSelect) {
33 +
return this.$listeners
34 +
}
35 + 36 +
let listeners = {}
37 +
let listenerNames = Object.keys(this.$listeners)
38 + 39 +
listenerNames.forEach(listener => {
40 +
if (MdInteractionEvents.includes(listener)) {
41 +
listeners[listener] = $event => {
42 +
this.$listeners[listener]($event)
43 +
this.closeMenu()
44 +
}
45 +
} else {
46 +
listeners[listener] = this.$listeners[listener]
47 +
}
48 +
})
49 + 50 +
return listeners
27 51
}
28 52
},
29 53
methods: {
@@ -41,26 +65,6 @@
41 65
}
42 66
}
43 67
},
44 -
created () {
45 -
if (this.MdMenu.closeOnSelect) {
46 -
let listenerNames = Object.keys(this.$listeners)
47 - 48 -
listenerNames.forEach(listener => {
49 -
if (MdInteractionEvents.includes(listener)) {
50 -
this.listeners[listener] = $event => {
51 -
if (!this.disabled) {
52 -
this.$listeners[listener]($event)
53 -
this.closeMenu()
54 -
}
55 -
}
56 -
} else {
57 -
this.listeners[listener] = this.$listeners[listener]
58 -
}
59 -
})
60 -
} else {
61 -
this.listeners = this.$listeners
62 -
}
63 -
},
64 68
mounted () {
65 69
if (this.$el.children && this.$el.children[0]) {
66 70
let listItem = this.$el.children[0]
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4