2
0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-22 06:20: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>