Scrollable (#3)

* Add ability to close context menu on scroll * Update README * Update test page * Update changelog
2026-06-18 19:00:33 +03:00 · 2018-05-29 12:44:52 -05:00
parent c1890e5a02
commit ca7b95b553
7 changed files with 173 additions and 162 deletions
@@ -1,5 +1,8 @@
 # Changelog

+### 3.1.0 (May 29, 2018)
+- *Add:* Close context menu automatically on window scroll
+
 ### 3.0.2 (May 28, 2018)
 - Update documentation
 - Add [demos](https://rawilk.github.io/vue-context) for the component
@@ -144,6 +144,12 @@ new Vue({
 }).$mount('#app');
 ```

+## Props
+
+| Property | Type | Default | Description
+| -------- | ---- | ------- | -----------
+| `closeOnScroll` | Boolean | `true` | If set to true, context menu will automatically close on window scroll.
+
 ## Credits

 vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
@@ -13,6 +13,13 @@

 <script>
 	export default {
+		props: {
+		    closeOnScroll: {
+		        type: Boolean,
+			    default: true
+		    },
+		},
+
 		computed: {
 			/**
 			 * Generate the CSS styles for positioning the context menu.
@@ -35,7 +42,26 @@
 		    };
 		},

+		mounted () {
+		    if (this.closeOnScroll) {
+		    	this.addScrollEventListener();
+		    }
+		},
+
+		beforeDestroy () {
+		    if (this.closeOnScroll) {
+		    	this.removeScrollEventListener();
+		    }
+		},
+
 		methods: {
+			/**
+			 * Add scroll event listener to close context menu.
+			 */
+			addScrollEventListener () {
+			    window.addEventListener('scroll', this.close);
+			},
+
 			/**
 			 * Close the context menu.
 			 */
@@ -82,8 +108,35 @@

 			    this.top = top;
 			    this.left = left;
-			}
+			},
+
+			/**
+			 * Remove the scroll event listener to close the context menu.
+			 */
+			removeScrollEventListener () {
+			    window.removeEventListener('scroll', this.close);
+			},
 		},
+
+		watch: {
+			/**
+			 * Add or remove the scroll event listener when the prop value changes.
+			 *
+			 * @param {boolean} value
+			 * @param {boolean} oldValue
+			 */
+		    closeOnScroll (value, oldValue) {
+		        if (value === oldValue) {
+		        	return;
+		        }
+
+		        if (value) {
+		        	this.addScrollEventListener();
+		        } else {
+		        	this.removeScrollEventListener();
+		        }
+		    }
+		}
 	};
 </script>

@@ -4,13 +4,13 @@
 		<meta charset="UTF-8">
 		<title>Vue Context Test Page</title>
 	</head>
-	<body>
+	<body style="height:2000px;">
 		<div id="app">
 			<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
 				Right click on me
 			</p>

-			<vue-context ref="menu">
+			<vue-context ref="menu" :close-on-scroll="close">
 				<ul slot-scope="child">
 					<li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
 					<li>Option 2</li>
@@ -6,6 +6,10 @@ new Vue({
 		VueContext
 	},

+	data: {
+		close: true
+	},
+
 	methods: {
 		onClick (data) {
 			console.log(data);