zoukankan      html  css  js  c++  java
  • 右键的点击事件

    cnpm i v-contextmenu -S
    可以安装依赖
    main.js 全局引用

    import contentmenu from 'v-contextmenu'
    import 'v-contextmenu/dist/index.css'
    
    Vue.use(contentmenu)
    

      

    <template>
      <div class="example">
        <v-contextmenu ref="contextmenu" :theme="theme">
          <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
          <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
    
          <v-contextmenu-item divider></v-contextmenu-item>
    
          <v-contextmenu-submenu @submenu-show="handleSubmenuShow" title="子菜单">
            <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
    
            <v-contextmenu-item divider></v-contextmenu-item>
    
            <v-contextmenu-submenu title="子菜单">
              <v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
            </v-contextmenu-submenu>
    
            <v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
    
            <v-contextmenu-item :auto-hide="false">不自动关闭1</v-contextmenu-item>
            <v-contextmenu-item :auto-hide="false">不自动关闭2</v-contextmenu-item>
          </v-contextmenu-submenu>
        </v-contextmenu>
    
        <div :class="['box', theme]" v-contextmenu:contextmenu>
          右键点击此区域
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Submenu',
        props: {
          theme: String,
        },
        methods: {
          handleClick (vm, event) {
            console.log(vm, event)
          },
          handleSubmenuShow (vm, placement) {
            console.log(vm, placement)
          },
        },
      }
    </script>
    
    <style scoped>
      .box {
         100%;
      }
    </style>
    

      

  • 相关阅读:
    10 vue中 v-model ,计算机demo
    linear-gradient
    flexible.js
    九宫格抽奖原理
    js匿名函数与闭包作用
    HTML5实现九宫格布局
    scrollLeft/scrollTop/scrollHeight
    通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js
    右击事件oncontentmenu
    js/jquery判断一个对象是否为空
  • 原文地址:https://www.cnblogs.com/mzj143/p/13600214.html
Copyright © 2011-2022 走看看