wip

2026-05-17 04:59:35 +03:00 · 2020-08-30 13:33:48 -05:00
parent b2403b5579
commit 1fcf058dfc
1 changed files with 113 additions and 0 deletions
@@ -0,0 +1,113 @@
+---
+title: Advanced Demo
+sort: 2
+---
+
+<div id="app">
+## Demo 1
+
+{.tip}
+> Right click on each item to see a more customized context menu appear for each item.
+
+<div style="margin-bottom: 1rem;">
+    <advanced-1></advanced-1>
+</div>
+
+```html
+<template>
+    <div>
+        <div class="bg-white shadow overflow-hidden sm:rounded-md">
+            <ul>
+                <li>
+                    <a href="#"
+                       class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
+                       :class="{ 'border-t border-gray-200': index > 0 }"
+                       v-for="(item, index) in items"
+                       :key="index"
+                       @contextmenu.prevent="$refs.menu.open($event, { name: item, index })"
+                    >
+                        <div class="flex items-center px-4 py-4 sm:px-6"
+                             :class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
+                        >
+                            <div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
+                                <div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <div class="my-4 text-right" v-show="showReset">
+            <button type="button"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150"
+                    @click="reset"
+            >
+                Reset Demo
+            </button>
+        </div>
+
+        <vue-context ref="menu">
+            <template slot-scope="child" v-if="child.data">
+                <li>
+                    <a @click.prevent="alertName(child.data.name)">
+                        Alert name
+                    </a>
+                </li>
+                <li>
+                    <a @click.prevent="remove(child.data.index)">
+                        Delete "{{ child.data.name }}"
+                    </a>
+                </li>
+            </template>
+        </vue-context>
+    </div>
+</template>
+
+<script>
+    import VueContext from 'vue-context';
+    import 'vue-context/src/sass/vue-context.scss';
+
+    const items = [
+        'Cras justo odio',
+        'Dapibus ac facilisis in',
+        'Morbi leo risus',
+        'Porta ac consectetur ac',
+        'Vestibulum at eros'
+    ];
+
+    export default {
+        components: { VueContext },
+
+        computed: {
+            showReset () {
+                return this.items.length < items.length;
+            }
+        },
+
+        data () {
+            return {
+                items: [...items]
+            };
+        },
+
+        methods: {
+            alertName (name) {
+                alert(`You clicked on "${name}"!`);
+            },
+
+            remove (index) {
+                this.$delete(this.items, index);
+            },
+
+            reset () {
+                this.items = [...items];
+            }
+        }
+    };
+</script>
+```
+
+</div>
+
+<script src="../scripts/vue-context-demos.js"></script>