import { defineComponent } from "vue" ; import { GithubOutlined , GitlabOutlined } from "@ant-design/icons-vue" ; import TriggerBox from "./TriggerBox" ; import { Contextmenu , ContextmenuItem , ContextmenuSubmenu } from "../src" ; const ExampleMultiple = defineComponent ( { name : "ExampleMultiple" , setup ( ) { return ( ) => ( < > < div style = { { display : "flex" , flexDirection : "column" , height : "100%" , } } > < div v - contextmenu = { [ null , "contextmenu" ] } style = { { height : "100%" , } } > < TriggerBox > < code > 右键点击此区域 < /code> < /TriggerBox> < /div> < div v - contextmenu = { [ null , "contextmenu" ] } style = { { marginTop : "12px" , height : "100%" , } } > < TriggerBox > < code > 右键点击此区域 < /code> < /TriggerBox> < /div> < div v - contextmenu = { [ null , "contextmenu1" ] } style = { { marginTop : "12px" , height : "100%" , } } > < TriggerBox > < code > 右键点击此区域 < /code> < /TriggerBox> < /div> < /div> < Contextmenu ref = "contextmenu" > < ContextmenuItem > < GithubOutlined /> & nbsp ; GitHub < /ContextmenuItem> < ContextmenuItem > < GitlabOutlined /> & nbsp ; GitLab < /ContextmenuItem> < /Contextmenu> < Contextmenu ref = "contextmenu1" > < ContextmenuSubmenu title = "蔬菜菜" > < ContextmenuItem > 土豆 < /ContextmenuItem> < ContextmenuItem > 黄瓜 < /ContextmenuItem> < ContextmenuSubmenu title = "青菜" > < ContextmenuItem > 小油菜 < /ContextmenuItem> < ContextmenuItem > 空心菜 < /ContextmenuItem> < ContextmenuItem > 紫罗兰 < /ContextmenuItem> < /ContextmenuSubmenu> < /ContextmenuSubmenu> < /Contextmenu> < />); } , } ) ; export default ExampleMultiple ;