1<template> 2 <vue-context ref="menu"> 3 4 </vue-context> 5</template> 6 7<script> 8import VueContext from 'vue-context'; 9 10export default { 11 name: 'NodeContextMenu', 12 components: { 13 VueContext, 14 }, 15 methods: { 16 open(e) { 17 this.$refs.menu.open(e); 18 }, 19 close() { 20 this.$refs.menu.close(); 21 }, 22 }, 23}; 24</script> 25<style scoped> 26.v-context, 27.v-context ul { 28 background-color: #fff; 29 background-clip: padding-box; 30 border-radius: .25rem; 31 border: 1px solid rgba(0, 0, 0, .15); 32 box-shadow: 33 0 2px 2px 0 rgba(0, 0, 0, .14), 34 0 3px 1px -2px rgba(0, 0, 0, .2), 35 0 1px 5px 0 rgba(0, 0, 0, .12); 36 display: block; 37 margin: 0; 38 padding: 10px 0; 39 min-width: 10rem; 40 z-index: 1500; 41 position: fixed; 42 list-style: none; 43 box-sizing: border-box; 44 max-height: calc(100% - 50px); 45 overflow-y: auto 46} 47 48.v-context>li, 49.v-context ul>li { 50 margin: 0; 51 position: relative 52} 53 54.v-context>li>a, 55.v-context ul>li>a { 56 display: block; 57 padding: .5rem 1.5rem; 58 font-weight: 400; 59 color: #212529; 60 text-decoration: none; 61 white-space: nowrap; 62 background-color: transparent; 63 border: 0 64} 65 66.v-context>li>a:focus, 67.v-context>li>a:hover, 68.v-context ul>li>a:focus, 69.v-context ul>li>a:hover { 70 text-decoration: none; 71 color: #212529; 72 background-color: #f8f9fa 73} 74 75.v-context:focus, 76.v-context>li>a:focus, 77.v-context ul:focus, 78.v-context ul>li>a:focus { 79 outline: 0 80} 81 82.v-context__sub>a:after { 83 content: "\2BC8"; 84 float: right; 85 padding-left: 1rem 86} 87 88.v-context__sub>ul { 89 display: none 90} 91</style> 92