Vue EasyUI tabs 弹出 Context Menu 菜单事件

最新推荐文章于 2024-05-22 15:47:57 发布

东边的小山

最新推荐文章于 2024-05-22 15:47:57 发布

阅读量616

点赞数

分类专栏： easyUI vue

本文链接：https://blog.csdn.net/yelin042/article/details/107234921

版权

vue 同时被 2 个专栏收录

103 篇文章 5 订阅

订阅专栏

easyUI

75 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI for Vue</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/vue.css">
    <script src="https://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
    <script src="https://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
    <script src="https://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
    <script src="https://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
    <style type="text/css">
        body{
            padding: 20px;
        }
        h2{
            margin: 0 0 20px 0;
        }
        .mycontainer{
            min-width: 700px;
        }
    </style>
</head>
<body>
	    <div id="app"></div>
    <script type="text/babel">
    	var demobasic={
    		template: `
  <div>
    <h2>Basic Tabs</h2>
    <Tabs style="height:250px" @contextmenu.native.prevent="$refs.m1.showContextMenu($event.pageX,$event.pageY)">
      <TabPanel :title="'Tab1'">
        <p>Tab Panel1</p>
      </TabPanel>
      <TabPanel :title="'Tab2'">
        <p>Tab Panel2</p>
      </TabPanel>
      <TabPanel :title="'Tab3'">
        <p>Tab Panel3</p>
      </TabPanel>
      <TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
        <p>This is the help content.</p>
      </TabPanel>
    </Tabs>
        <Menu ref="m1">
            <MenuItem text="New"></MenuItem>
            <MenuItem text="Open">
                <SubMenu>
                    <MenuItem text="Word"></MenuItem>
                    <MenuItem text="Excel"></MenuItem>
                    <MenuItem text="PowerPoint"></MenuItem>
                </SubMenu>
            </MenuItem>
            <MenuItem text="Save" iconCls="icon-save"></MenuItem>
            <MenuItem text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
            <MenuItem text="Exit"></MenuItem>
        </Menu>
  </div>
`,
    		    	}
    	var app = new Vue({
    		el: '#app',
    		template: `<demobasic class="mycontainer"></demobasic>`,
    		components: {
    			demobasic:demobasic    		
       }
    	})
    </script>
   
</body>
</html>