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:
+37
-13
@@ -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>
|
||||
|
||||
Vendored
+713
-10
File diff suppressed because one or more lines are too long
+12
-12
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user