Skip to content

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

test2

parent e9eaefa9
Hide 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,40 +95,50 @@ export default { ...@@ -95,40 +95,50 @@ export default {
data: { data: {
type: Array, type: Array,
default: [] default: []
},
params: {
type: Object,
default: null
} }
}, },
mounted() { mounted() {
this.visible = true; if (this.data != []) {
this.items = this.data this.load(this.data)
alert(JSON.stringify(this.items))
for (let item of this.items) {
if (item.icon) {
this.hasIcon = true;
break;
}
} }
this.$nextTick(() => { },
const windowWidth = document.documentElement.clientWidth; methods: {
const windowHeight = document.documentElement.clientHeight; load(v) {
const menu = this.$refs.menu; this.visible = true;
const menuWidth = menu.offsetWidth; this.items = this.data
const menuHeight = menu.offsetHeight; for (let item of this.items) {
if (item.icon) {
this.hasIcon = true;
break;
}
}
this.position.x = this.params.x
this.position.y = this.params.y
this.$nextTick(() => {
const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight;
const menu = this.$refs.menu;
const menuWidth = menu.offsetWidth;
const menuHeight = menu.offsetHeight;
(this.openTrend === SUBMENU_OPEN_TREND_LEFT ? (this.openTrend === SUBMENU_OPEN_TREND_LEFT ?
this.leftOpen : this.leftOpen :
this.rightOpen)(windowWidth, windowHeight, menuWidth); this.rightOpen)(windowWidth, windowHeight, menuWidth);
this.style.top = this.position.y; this.style.top = this.position.y;
if (this.position.y + menuHeight > windowHeight) { if (this.position.y + menuHeight > windowHeight) {
if (this.position.height === 0) { if (this.position.height === 0) {
this.style.top = this.position.y - menuHeight; this.style.top = this.position.y - menuHeight;
} else { } else {
this.style.top = windowHeight - menuHeight; this.style.top = windowHeight - menuHeight;
}
} }
} });
}); },
},
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%;">
<h2>SubMenu</h2> <div class="mt50 pl10">
<p><Button @click="showBmenu">showMenu</Button></p> <h2>SubMenu</h2>
<Submenus :show="showStatu" :data="tempItems"></Submenus> <p><Button @click="showBmenu" ref="showBtn">左键打开菜单</Button></p>
<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,70 +19,66 @@ export default { ...@@ -13,70 +19,66 @@ export default {
data() { data() {
return { return {
//submenu //submenu
showStatu: false, showStatu: false, //控件是否显示
tempItems: [{ tempItems: [], //控件数据
label: "前进(F)", params: {}, //控件坐标位置
disabled: true
}, message: "右键打开菜单",
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh"
},
{
label: "另存为(A)..."
},
{
label: "打印(P)...",
icon: "el-icon-printer"
},
{
label: "投射(C)...",
divided: true
},
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{
label: "翻译成简体中文"
},
{
label: "翻译成繁体中文"
},
],
},
],
useCustomClass: false, useCustomClass: false,
nametitle: 'contextmenu-submenu',
level: '',
}; };
}, },
mounted() { mounted() {
}, },
methods: { methods: {
showBmenu() { showBmenu(event) {
let obj = event.target
let objSet = obj.getBoundingClientRect()
this.showStatu = true; this.showStatu = true;
this.params = {
x: objSet.x,
y: objSet.bottom
};
console.log(event)
this.tempItems = [{ this.tempItems = [{
label: "返回(B)",
onClick: () => {
this.showStatu = false;
},
}, {
label: "前进(F)", label: "前进(F)",
disabled: true disabled: true,
onClick: () => {
this.showStatu = false;
},
}, },
{ {
label: "重新加载(R)", label: "重新加载(R)",
divided: true, divided: true,
icon: "el-icon-refresh" icon: "el-icon-refresh",
onClick: () => {
this.showStatu = false;
},
}, },
{ {
label: "另存为(A)..." label: "另存为(A)...",
onClick: () => {
this.showStatu = false;
},
}, },
{ {
label: "打印(P)...", label: "打印(P)...",
icon: "el-icon-printer" icon: "el-icon-printer",
onClick: () => {
this.showStatu = false;
},
}, },
{ {
label: "投射(C)...", label: "投射(C)...",
divided: true divided: true,
onClick: () => {
this.showStatu = false;
},
}, },
{ {
label: "使用网页翻译(T)", label: "使用网页翻译(T)",
...@@ -91,7 +93,142 @@ export default { ...@@ -91,7 +93,142 @@ export default {
], ],
}, },
] ]
} },
onCon(event) {
this.$contextmenu({
items: [{
label: `自定义样式(${this.useCustomClass ? "开" : "关"})`,
onClick: () => {
this.useCustomClass = !this.useCustomClass;
},
},
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
},
},
{
label: "前进(F)",
disabled: true
},
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh"
},
{
label: "另存为(A)..."
},
{
label: "打印(P)...",
icon: "el-icon-printer"
},
{
label: "投射(C)...",
divided: true
},
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{
label: "翻译成简体中文"
},
{
label: "翻译成繁体中文"
},
],
},
{
label: "截取网页(R)",
minWidth: 0,
children: [{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
},
},
{
label: "前进(F)",
disabled: true
},
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh"
},
{
label: "另存为(A)..."
},
{
label: "打印(P)...",
icon: "el-icon-printer"
},
{
label: "投射(C)...",
divided: true
},
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{
label: "翻译成简体中文"
},
{
label: "翻译成繁体中文"
},
],
},
{
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