Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit ca7b95b

Browse files
rawilkrawilk
authored
Scrollable (#3)
* Add ability to close context menu on scroll * Update README * Update test page * Update changelog
1 parent c1890e5 commit ca7b95b

File tree

7 files changed

+173
-162
lines changed

7 files changed

+173
-162
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
### 3.1.0 (May 29, 2018)
4+
- *Add:* Close context menu automatically on window scroll
5+
36
### 3.0.2 (May 28, 2018)
47
- Update documentation
58
- Add [demos](https://rawilk.github.io/vue-context) for the component

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,12 @@ new Vue({
144144
}).$mount('#app');
145145
```
146146

147+
## Props
148+
149+
| Property | Type | Default | Description
150+
| -------- | ---- | ------- | -----------
151+
| `closeOnScroll` | Boolean | `true` | If set to true, context menu will automatically close on window scroll.
152+
147153
## Credits
148154

149155
vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)

‎dist/vue-context.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/vue-context.vue‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@
1313

1414
<script>
1515
export default {
16+
props: {
17+
closeOnScroll: {
18+
type: Boolean,
19+
default: true
20+
},
21+
},
22+
1623
computed: {
1724
/**
1825
* Generate the CSS styles for positioning the context menu.
@@ -35,7 +42,26 @@
3542
};
3643
},
3744
45+
mounted () {
46+
if (this.closeOnScroll) {
47+
this.addScrollEventListener();
48+
}
49+
},
50+
51+
beforeDestroy () {
52+
if (this.closeOnScroll) {
53+
this.removeScrollEventListener();
54+
}
55+
},
56+
3857
methods: {
58+
/**
59+
* Add scroll event listener to close context menu.
60+
*/
61+
addScrollEventListener () {
62+
window.addEventListener('scroll', this.close);
63+
},
64+
3965
/**
4066
* Close the context menu.
4167
*/
@@ -82,8 +108,35 @@
82108
83109
this.top = top;
84110
this.left = left;
85-
}
111+
},
112+
113+
/**
114+
* Remove the scroll event listener to close the context menu.
115+
*/
116+
removeScrollEventListener () {
117+
window.removeEventListener('scroll', this.close);
118+
},
86119
},
120+
121+
watch: {
122+
/**
123+
* Add or remove the scroll event listener when the prop value changes.
124+
*
125+
* @param {boolean} value
126+
* @param {boolean} oldValue
127+
*/
128+
closeOnScroll (value, oldValue) {
129+
if (value === oldValue) {
130+
return;
131+
}
132+
133+
if (value) {
134+
this.addScrollEventListener();
135+
} else {
136+
this.removeScrollEventListener();
137+
}
138+
}
139+
}
87140
};
88141
</script>
89142

‎test/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<meta charset="UTF-8">
55
<title>Vue Context Test Page</title>
66
</head>
7-
<body>
7+
<body style="height:2000px;">
88
<div id="app">
99
<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
1010
Right click on me
1111
</p>
1212

13-
<vue-context ref="menu">
13+
<vue-context ref="menu" :close-on-scroll="close">
1414
<ul slot-scope="child">
1515
<li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
1616
<li>Option 2</li>

0 commit comments

Comments
 (0)