2
0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-21 23:10:32 +03:00

Accessibility (#22)

This commit is contained in:
Randall Wilk
2019-05-18 19:44:34 -05:00
committed by GitHub
parent ed1344e099
commit 5b6dd62705
22 changed files with 1421 additions and 1390 deletions
+37 -13
View File
@@ -3,22 +3,46 @@
<head>
<meta charset="UTF-8">
<title>Vue Context Test Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body style="height:2000px;">
<body>
<div id="app">
<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
Right click on me
</p>
<vue-context ref="menu" :close-on-scroll="close"
@close="onClose"
@open="onOpen"
>
<ul slot-scope="child">
<li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
<li>Option 2</li>
<div class="container py-3 mt-5">
<ul class="list-group">
<li v-for="(item, index) in items" :key="index"
class="list-group-item"
@contextmenu.prevent="$refs.menu.open"
>
{{ item }}
</li>
</ul>
</vue-context>
<vue-context ref="menu">
<template slot-scope="child">
<li tabindex="0">
<a href="#" class="v-context-item"
@click.prevent="onClick('item 1')"
>
Do something
</a>
</li>
<li>
<a href="#" class="v-context-item"
@click.prevent="onClick('item 2')"
>
Do something else
</a>
</li>
<li>
<a href="#" class="v-context-item"
@click.prevent="onClick('item 3')"
>
Another option
</a>
</li>
</template>
</vue-context>
</div>
</div>
<script src="js/dist/index.js"></script>
+713 -10
View File
File diff suppressed because one or more lines are too long
+12 -12
View File
@@ -1,5 +1,6 @@
import Vue from 'vue';
import { VueContext } from '../../../dist/vue-context';
import { VueContext } from '../../../src/js/index';
// import { VueContext } from '../../../dist/js/vue-context';
new Vue({
components: {
@@ -7,20 +8,19 @@ new Vue({
},
data: {
close: true
close: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
},
methods: {
onClick (data) {
// console.log(data);
onClick (text) {
alert(text);
},
onClose () {
console.log('closing');
},
onOpen (event, data, top, left) {
console.log(data, top, left);
}
},
}).$mount('#app');