PmContextmenu

基础用法

<div class="m-20">
  <el-radio-group v-model="theme">
    <el-radio-button label="default"/>
    <el-radio-button label="bright"/>
    <el-radio-button label="dark"/>
  </el-radio-group>

</div>
<PmContextmenu ref="contextmenu" :theme="theme">
    <PmContextmenuItem @click="handleClick">菜单1</PmContextmenuItem>
    <PmContextmenuItem @click="handleClick">菜单2</PmContextmenuItem>
    <PmContextmenuItem @click="handleClick">菜单3</PmContextmenuItem>
    <PmContextmenuItem divider></PmContextmenuItem>
    <PmContextmenuSubmenu @submenu-show="handleSubmenuShow" title="子菜单">
      <PmContextmenuItem @click="handleClick">菜单4</PmContextmenuItem>
      <PmContextmenuItem @click="handleClick">菜单5</PmContextmenuItem>
      <PmContextmenuItem @click="handleClick">菜单6</PmContextmenuItem>
      <PmContextmenuItem divider></PmContextmenuItem>
      <PmContextmenuSubmenu @submenu-show="handleSubmenuShow" title="子菜单的子菜单">
        <PmContextmenuItem @click="handleClick">菜单7</PmContextmenuItem>
        <PmContextmenuItem @click="handleClick">菜单8</PmContextmenuItem>
        <PmContextmenuItem @click="handleClick">菜单9</PmContextmenuItem>
      </PmContextmenuSubmenu>
    </PmContextmenuSubmenu>
</PmContextmenu>

<div class="text-center pt-20" style="height:100px;background:#e8e8e8;width:300px;"  v-contextmenu:contextmenu>
  右键点击此区域
</div>

<script>
export default {
  data(){
    return {
      theme:'default',
    }
  },
  methods: {
    handleClick (vm, event) {
        alert(`「${vm.$slots.default[0].text}」被点击啦！`)
    },
    handleSubmenuShow (vm, placement) {
      console.log(vm, placement)
    },
  }
}
</script>

分组

<PmContextmenu ref="contextmenuGroup" theme="bright">
      <PmContextmenuGroup :max-width="240">
        <PmContextmenuItem :auto-hide="false">菜单1</PmContextmenuItem>
        <PmContextmenuItem>菜单2</PmContextmenuItem>
        <PmContextmenuItem>菜单3</PmContextmenuItem>
      </PmContextmenuGroup>
      <PmContextmenuItem divider></PmContextmenuItem>
      <PmContextmenuGroup :max-width="240">
        <PmContextmenuItem :auto-hide="false">菜单4</PmContextmenuItem>
        <PmContextmenuItem>菜单5</PmContextmenuItem>
        <PmContextmenuItem>菜单6</PmContextmenuItem>
      </PmContextmenuGroup>
    </PmContextmenu>

<div class="text-center pt-20" style="height:100px;background:#e8e8e8;width:300px;" v-contextmenu:contextmenuGroup>
  右键点击此区域
</div>

<script>
export default {
  methods: {
    handleClick (vm, event) {
        alert(`「${vm.$slots.default[0].text}」被点击啦！`)
    },
    handleSubmenuShow (vm, placement) {
      console.log(vm, placement)
    },
  }
}
</script>

PmContextmenu

参数	说明	类型	可选值	默认值
eventType	事件类型	string	contextmenu / click	contextmenu
disabled	是否禁用	boolean	true / false	false
theme	样式	string	default / bright / dark	default

PmContextmenuItem

参数	说明	类型	可选值	默认值
divider	分割线	boolean	-	false
disabled	是否禁用	boolean	true / false	false
autoHide	自动隐藏	boolean	true / false	true

PmContextmenuGroup

参数	说明	类型	可选值	默认值
maxWidth	最大宽度	number/string	-	null

PmContextmenuSubmenu

参数	说明	类型	可选值	默认值
title	标题	string	-
disabled	是否禁用	boolean	true / false	false