Test issue #4

2026-06-10 06:12:23 +03:00 · 2018-06-20 08:00:52 -05:00
parent ff6a8f7a11
commit b041b0ece4
5 changed files with 226 additions and 16 deletions
@@ -3,4 +3,5 @@ const { mix } = require('laravel-mix');
 mix
    .setPublicPath('test/js/dist')
    .js('test/js/src/index.js', 'index.js')
+	.js('test/js/src/test_issue_4.js', 'test_issue_4.js')
    .sourceMaps();
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import { VueContext } from '../../../dist/vue-context';
+
+new Vue({
+	components: {
+		VueContext
+	},
+
+	data: {
+		items: []
+	},
+
+	mounted () {
+		for (let i = 0; i < 30; i++) {
+			this.items.push(`Row ${i + 1}`);
+		}
+	},
+
+	methods: {
+		onClick (data) {
+			alert(data);
+		},
+	},
+}).$mount('#app');
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Vue Context Issue Test #4</title>
+
+		<style>
+			#div1 {
+				height: 50px;
+				background: #ff0000;
+				position: -webkit-sticky;
+				position: sticky;
+				top: 0;
+				z-index: 1020;
+			}
+
+			#div2 {
+				height: calc(100vh - 50px);
+			}
+
+			#div2 table {
+				height: 100%;
+				width: 100%;
+				border-collapse: collapse;
+			}
+
+			#div2 table td {
+				border: 1px solid #ddd;
+				padding: 0;
+				line-height: 1;
+			}
+		</style>
+	</head>
+	<body >
+		<div id="app">
+			<div id="div1">
+				&nbsp;
+			</div>
+
+			<div id="div2">
+				<table>
+					<tbody>
+						<tr v-for="item in items" @contextmenu.prevent="$refs.menu.open($event, item)">
+							<td v-text="item"></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<vue-context ref="menu">
+				<ul slot-scope="child" v-if="child.data">
+					<li @click="onClick(child.data)">Do something with: {{ child.data }}</li>
+				</ul>
+			</vue-context>
+		</div>
+
+		<script src="js/dist/test_issue_4.js"></script>
+	</body>
+</html>