2
0
mirror of https://github.com/tenrok/vue-context.git synced 2026-05-17 18:19:36 +03:00
Files
vue-context/docs/usage/basic-usage.md
T
Randall Wilk 1017d2e3b5 wip
2020-08-31 07:39:28 -05:00

1.1 KiB

title, sort
title sort
Basic Usage 1

Using the menu requires very little setup as shown below.

To use the context menu, you need to import it into your component and then create a trigger element to open the context menu on.

<template>
    <div>
        <p @contextmenu.prevent="$refs.menu.open">
            Right click on me
        </p>

        <vue-context ref="menu">
            <li>
                <a @click.prevent="onClick($event.target.innerText)">
                    Option 1
                </a>
            </li>
            <li>
                <a @click.prevent="onClick($event.target.innerText)">
                    Option 2
                </a>
            </li>
        </vue-context>
    </div>
</template>

<script>
    import VueContext from 'vue-context';
    import 'vue-context/src/sass/vue-context.scss'; // Alternatively import into a stylesheet instead

    export default {
        components: { VueContext },

        methods: {
            onClick(text) {
                alert(`You clicked "${text}"!`);
            },
        },
    };
</script>