Shulou(Shulou.com)06/01 Report--

Today, Xiaobian to share with you how to use the custom right-click menu plug-in vue related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone to refer to, I hope you read this article after some harvest, let's learn about it together.

demo

usage

Install plugins via npm

npm i vue-context -S

Introduced and registered in main.js

import Vue from 'vue';import VueContext from 'vue-context';new Vue({ components: { VueContext },

Use within the page

Right click on me

Use @contextmenu.prevent="$refs.menu.open" to right-click the element to be bound. At the same time, you can also pass in the relevant parameters as follows:

Menu bar section

The menu bar is mainly ul>li structure project can set its own style

vue-context also has several attributes

closeOnClick Default value is true When set to false, the mouse click menu bar will not automatically close

closeOnScroll Default value is true When set to false, the mouse click menu bar will not automatically close

Option 1 Option 2// data data () { return { // when set to true, the context menu will close when clicked on closeOnClick: true, // when set to true, the context menu will close when the window is scrolled closeOnScroll: true, // When false, the context menu is shown via v-show and will always be present in the DOM lazy: false, // The `role` attribute on the menu. Recommended to stay as `menu` role: 'menu', // The root html tag of the menu. Recommended to stay as `ul` tag: 'ul', // This is how the component is able to find each menu item. Useful if you use non-recommended markup itemSelector: ['.custom-item-class']};} The above is "How to use custom right-click menu plug-in in vue" All the contents of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.