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>
<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 class="menu_body">
<template v-for="(item,index) of items">
......@@ -95,40 +95,50 @@ export default {
data: {
type: Array,
default: []
},
params: {
type: Object,
default: null
}
},
mounted() {
this.visible = true;
this.items = this.data
alert(JSON.stringify(this.items))
for (let item of this.items) {
if (item.icon) {
this.hasIcon = true;
break;
}
if (this.data != []) {
this.load(this.data)
}
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;
},
methods: {
load(v) {
this.visible = true;
this.items = this.data
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.leftOpen :
this.rightOpen)(windowWidth, windowHeight, menuWidth);
(this.openTrend === SUBMENU_OPEN_TREND_LEFT ?
this.leftOpen :
this.rightOpen)(windowWidth, windowHeight, menuWidth);
this.style.top = this.position.y;
if (this.position.y + menuHeight > windowHeight) {
if (this.position.height === 0) {
this.style.top = this.position.y - menuHeight;
} else {
this.style.top = windowHeight - menuHeight;
this.style.top = this.position.y;
if (this.position.y + menuHeight > windowHeight) {
if (this.position.height === 0) {
this.style.top = this.position.y - menuHeight;
} else {
this.style.top = windowHeight - menuHeight;
}
}
}
});
},
methods: {
});
},
leftOpen(windowWidth, windowHeight, menuWidth) {
this.style.left = this.position.x - menuWidth;
this.openTrend = SUBMENU_OPEN_TREND_LEFT;
......@@ -219,6 +229,7 @@ export default {
data(v) {
if (v != []) {
this.data = v;
this.load(this.data)
}
},
},
......
components/page/bmenu/index.vue
View file @ 1f6fcc3d
<template>
<div class="ib">
<template>
右键菜单
</template>
</div>
<div></div>
</template>
<script>
......
pages/test.vue
View file @ 1f6fcc3d
......@@ -28,6 +28,7 @@
<MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
<MenuItem name="a5" to="/test/test1">colum验证</MenuItem>
<MenuItem name="a6" to="/test/test2">右键点击/点击</MenuItem>
</div>
</Menu>
</div>
......
pages/test/test2.vue
View file @ 1f6fcc3d
<template>
<div style="width:100%;">
<h2>SubMenu</h2>
<p><Button @click="showBmenu">showMenu</Button></p>
<Submenus :show="showStatu" :data="tempItems"></Submenus>
<div class="mt50 pl10">
<h2>SubMenu</h2>
<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>
</template>
......@@ -13,70 +19,66 @@ export default {
data() {
return {
//submenu
showStatu: false,
tempItems: [{
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: "翻译成繁体中文"
},
],
},
],
showStatu: false, //控件是否显示
tempItems: [], //控件数据
params: {}, //控件坐标位置
message: "右键打开菜单",
useCustomClass: false,
nametitle: 'contextmenu-submenu',
level: '',
};
},
mounted() {
},
methods: {
showBmenu() {
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
disabled: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh"
icon: "el-icon-refresh",
onClick: () => {
this.showStatu = false;
},
},
{
label: "另存为(A)..."
label: "另存为(A)...",
onClick: () => {
this.showStatu = false;
},
},
{
label: "打印(P)...",
icon: "el-icon-printer"
icon: "el-icon-printer",
onClick: () => {
this.showStatu = false;
},
},
{
label: "投射(C)...",
divided: true
divided: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "使用网页翻译(T)",
......@@ -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>
<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