Skip to content

M
mes-ui
Commit 1f6fcc3d authored by renjintao's avatar renjintao
Browse files
Options

test2

parent e9eaefa9
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 79 deletions
components/page/bmenu/components/Submenu.vue
View file @ 1f6fcc3d
<template> <template>
<transition name="contextmenu-submenu-fade"> <transition name="contextmenu-submenu-fade" v-if="show">
<div ref="menu" :class="[commonClass.menu, 'menu', customClass]" :style="{left: style.left + 'px', top: style.top + 'px', minWidth: style.minWidth + 'px', zIndex: style.zIndex}" v-if="visible" @contextmenu="(e)=>e.preventDefault()"> <div ref="menu" :class="[commonClass.menu, 'menu', customClass]" :style="{left: style.left + 'px', top: style.top + 'px', minWidth: style.minWidth + 'px', zIndex: style.zIndex}" v-if="visible" @contextmenu="(e)=>e.preventDefault()">
<div class="menu_body"> <div class="menu_body">
<template v-for="(item,index) of items"> <template v-for="(item,index) of items">
...@@ -95,18 +95,29 @@ export default { ...@@ -95,18 +95,29 @@ export default {
data: { data: {
type: Array, type: Array,
default: [] default: []
},
params: {
type: Object,
default: null
} }
}, },
mounted() { mounted() {
if (this.data != []) {
this.load(this.data)
}
},
methods: {
load(v) {
this.visible = true; this.visible = true;
this.items = this.data this.items = this.data
alert(JSON.stringify(this.items))
for (let item of this.items) { for (let item of this.items) {
if (item.icon) { if (item.icon) {
this.hasIcon = true; this.hasIcon = true;
break; break;
} }
} }
this.position.x = this.params.x
this.position.y = this.params.y
this.$nextTick(() => { this.$nextTick(() => {
const windowWidth = document.documentElement.clientWidth; const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight; const windowHeight = document.documentElement.clientHeight;
...@@ -128,7 +139,6 @@ export default { ...@@ -128,7 +139,6 @@ export default {
} }
}); });
}, },
methods: {
leftOpen(windowWidth, windowHeight, menuWidth) { leftOpen(windowWidth, windowHeight, menuWidth) {
this.style.left = this.position.x - menuWidth; this.style.left = this.position.x - menuWidth;
this.openTrend = SUBMENU_OPEN_TREND_LEFT; this.openTrend = SUBMENU_OPEN_TREND_LEFT;
...@@ -219,6 +229,7 @@ export default { ...@@ -219,6 +229,7 @@ export default {
data(v) { data(v) {
if (v != []) { if (v != []) {
this.data = v; this.data = v;
this.load(this.data)
} }
}, },
}, },
......
components/page/bmenu/index.vue
View file @ 1f6fcc3d
<template> <template>
<div class="ib"> <div></div>
<template>
右键菜单
</template>
</div>
</template> </template>
<script> <script>
......
pages/test.vue
View file @ 1f6fcc3d
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<MenuItem name="a4" to="/test/resource">资源选择</MenuItem> <MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem> <MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
<MenuItem name="a5" to="/test/test1">colum验证</MenuItem> <MenuItem name="a5" to="/test/test1">colum验证</MenuItem>
<MenuItem name="a6" to="/test/test2">右键点击/点击</MenuItem>
</div> </div>
</Menu> </Menu>
</div> </div>
......
pages/test/test2.vue
View file @ 1f6fcc3d
<template> <template>
<div style="width:100%;"> <div style="width:100%;">
<div class="mt50 pl10">
<h2>SubMenu</h2> <h2>SubMenu</h2>
<p><Button @click="showBmenu">showMenu</Button></p> <p><Button @click="showBmenu" ref="showBtn">左键打开菜单</Button></p>
<Submenus :show="showStatu" :data="tempItems"></Submenus> <Submenus :show="showStatu" :data="tempItems" :params="params"></Submenus>
</div>
<div class="mt50 pl10">
<h2>Bmenu</h2>
<div @contextmenu="onCon" class="tc" style="width:120px;height:40px;line-height:40px;background:#f5f5f5;border:#ccc solid 1px; border-radius: 5px;">{{message}}</div>
</div>
</div> </div>
</template> </template>
...@@ -13,8 +19,97 @@ export default { ...@@ -13,8 +19,97 @@ export default {
data() { data() {
return { return {
//submenu //submenu
showStatu: false, showStatu: false, //控件是否显示
tempItems: [{ tempItems: [], //控件数据
params: {}, //控件坐标位置
message: "右键打开菜单",
useCustomClass: false,
};
},
mounted() {
},
methods: {
showBmenu(event) {
let obj = event.target
let objSet = obj.getBoundingClientRect()
this.showStatu = true;
this.params = {
x: objSet.x,
y: objSet.bottom
};
console.log(event)
this.tempItems = [{
label: "返回(B)",
onClick: () => {
this.showStatu = false;
},
}, {
label: "前进(F)",
disabled: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh",
onClick: () => {
this.showStatu = false;
},
},
{
label: "另存为(A)...",
onClick: () => {
this.showStatu = false;
},
},
{
label: "打印(P)...",
icon: "el-icon-printer",
onClick: () => {
this.showStatu = false;
},
},
{
label: "投射(C)...",
divided: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{
label: "翻译成简体中文"
},
{
label: "翻译成繁体中文"
},
],
},
]
},
onCon(event) {
this.$contextmenu({
items: [{
label: `自定义样式(${this.useCustomClass ? "开" : "关"})`,
onClick: () => {
this.useCustomClass = !this.useCustomClass;
},
},
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
},
},
{
label: "前进(F)", label: "前进(F)",
disabled: true disabled: true
}, },
...@@ -46,19 +141,17 @@ export default { ...@@ -46,19 +141,17 @@ export default {
}, },
], ],
}, },
], {
useCustomClass: false, label: "截取网页(R)",
nametitle: 'contextmenu-submenu', minWidth: 0,
level: '', children: [{
}; label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}, },
mounted() {
}, },
methods: { {
showBmenu() {
this.showStatu = true;
this.tempItems = [{
label: "前进(F)", label: "前进(F)",
disabled: true disabled: true
}, },
...@@ -90,8 +183,52 @@ export default { ...@@ -90,8 +183,52 @@ export default {
}, },
], ],
}, },
] {
} label: "截取网页(R)",
minWidth: 0,
children: [{
label: "截取可视化区域",
onClick: () => {
this.message = "截取可视化区域";
console.log("截取可视化区域");
},
},
{
label: "截取全屏"
},
],
},
{
label: "查看网页源代码(V)",
icon: "el-icon-view"
},
{
label: "检查(N)"
},
],
},
{
label: "查看网页源代码(V)",
icon: "el-icon-view"
},
{
label: "检查(N)"
},
],
event,
customClass: this.useCustomClass ? "custom-class" : "",
zIndex: 3,
minWidth: 230,
});
event.preventDefault();
},
}, },
}; };
</script> </script>
<style>
.custom-class .menu_item__available:hover {
background: #ffecf2 !important;
color: #ff4050 !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment