Skip to content

M
mes-ui
Commit 637f96b3 authored by renjintao's avatar renjintao
Browse files
Options

submenus bsub

parent 9a300667
Show whitespace changes
Inline Side-by-side
Showing with 694 additions and 102 deletions
components/page/bmenu/components/Submenu.vue 0 → 100644
View file @ 637f96b3
<template>
<transition name="contextmenu-submenu-fade">
<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">
<template v-if="!item.hidden">
<div :class="[
commonClass.menuItem, commonClass.unclickableMenuItem,
'menu_item', 'menu_item__disabled',
item.divided?'menu_item__divided':null
]" :key="index" v-if="item.disabled">
<div class="menu_item_icon" v-if="hasIcon">
<i :class="item.icon" v-if="item.icon"></i>
</div>
<span class="menu_item_label">{{item.label}}</span>
<div class="menu_item_expand_icon"></div>
</div>
<div :class="[
commonClass.menuItem, commonClass.unclickableMenuItem,
'menu_item', 'menu_item__available',
activeSubmenu.index===index? 'menu_item_expand':null,
item.divided?'menu_item__divided':null
]" :key="index" @mouseenter="($event)=>enterItem($event,item,index)" v-else-if="item.children">
<div class="menu_item_icon" v-if="hasIcon">
<i :class="item.icon" v-if="item.icon"></i>
</div>
<span class="menu_item_label">{{item.label}}</span>
<div class="menu_item_expand_icon">▶</div>
</div>
<div :class="[
commonClass.menuItem, commonClass.clickableMenuItem,
'menu_item', 'menu_item__available',
item.divided?'menu_item__divided':null
]" :key="index" @mouseenter="($event)=>enterItem($event,item,index)" @click="itemClick(item)" v-else>
<div class="menu_item_icon" v-if="hasIcon">
<i :class="item.icon" v-if="item.icon"></i>
</div>
<span class="menu_item_label">{{item.label}}</span>
<div class="menu_item_expand_icon"></div>
</div>
</template>
</template>
</div>
</div>
</transition>
</template>
<script>
import Vue from "vue";
import {
SUBMENU_X_OFFSET,
SUBMENU_Y_OFFSET,
SUBMENU_OPEN_TREND_LEFT,
SUBMENU_OPEN_TREND_RIGHT,
COMPONENT_NAME
} from "../constant";
export default {
name: "Submenu",
data() {
return {
commonClass: {
menu: null,
menuItem: null,
clickableMenuItem: null,
unclickableMenuItem: null
},
activeSubmenu: {
index: null,
instance: null
},
items: [],
position: {
x: 0,
y: 0,
width: 0,
height: 0
},
style: {
left: 0,
top: 0,
zIndex: 2,
minWidth: 150
},
customClass: null,
visible: false,
hasIcon: false,
openTrend: SUBMENU_OPEN_TREND_RIGHT
};
},
props: {
show: {
type: Boolean,
default: false,
},
data: {
type: Array,
default: []
}
},
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;
}
}
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.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;
if (this.style.left < 0) {
this.openTrend = SUBMENU_OPEN_TREND_RIGHT;
if (this.position.width === 0) {
this.style.left = 0;
} else {
this.style.left = this.position.x + this.position.width;
}
}
},
rightOpen(windowWidth, windowHeight, menuWidth) {
this.style.left = this.position.x + this.position.width;
this.openTrend = SUBMENU_OPEN_TREND_RIGHT;
if (this.style.left + menuWidth > windowWidth) {
this.openTrend = SUBMENU_OPEN_TREND_LEFT;
if (this.position.width === 0) {
this.style.left = windowWidth - menuWidth;
} else {
this.style.left = this.position.x - menuWidth;
}
}
},
enterItem(e, item, index) {
if (!this.visible) {
return;
}
if (this.activeSubmenu.instance) {
if (this.activeSubmenu.index === index) {
return;
} else {
this.activeSubmenu.instance.close();
this.activeSubmenu.instance = null;
this.activeSubmenu.index = null;
}
}
if (!item.children) {
return;
}
const menuItemClientRect = e.target.getBoundingClientRect();
const SubmenuConstructor = Vue.component(COMPONENT_NAME);
this.activeSubmenu.index = index;
this.activeSubmenu.instance = new SubmenuConstructor();
this.activeSubmenu.instance.items = item.children;
this.activeSubmenu.instance.openTrend = this.openTrend;
this.activeSubmenu.instance.commonClass = this.commonClass;
this.activeSubmenu.instance.position = {
x: menuItemClientRect.x + SUBMENU_X_OFFSET,
y: menuItemClientRect.y + SUBMENU_Y_OFFSET,
width: menuItemClientRect.width - 2 * SUBMENU_X_OFFSET,
height: menuItemClientRect.width
};
this.activeSubmenu.instance.style.minWidth =
typeof item.minWidth === "number" ? item.minWidth : this.style.minWidth;
this.activeSubmenu.instance.style.zIndex = this.style.zIndex;
this.activeSubmenu.instance.customClass =
typeof item.customClass === "string" ?
item.customClass :
this.customClass;
this.activeSubmenu.instance.$mount();
document.body.appendChild(this.activeSubmenu.instance.$el);
},
itemClick(item) {
if (!this.visible) {
return;
}
if (
item &&
!item.disabled &&
!item.hidden &&
typeof item.onClick === "function"
) {
return item.onClick();
}
},
close() {
this.visible = false;
if (this.activeSubmenu.instance) {
this.activeSubmenu.instance.close();
}
this.$nextTick(() => {
this.$destroy();
});
}
},
watch: {
data(v) {
if (v != []) {
this.data = v;
}
},
},
};
</script>
<style scoped>
.menu {
position: fixed;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
background: #fff;
border-radius: 4px;
padding: 8px 0;
}
.menu_body {
display: block;
}
.menu_item {
list-style: none;
line-height: 32px;
padding: 0 16px;
margin: 0;
font-size: 13px;
outline: 0;
display: flex;
align-items: center;
transition: 0.2s;
border-bottom: 1px solid #00000000;
}
.menu_item__divided {
border-bottom-color: #ebeef5;
}
.menu_item .menu_item_icon {
margin-right: 8px;
width: 13px;
}
.menu_item .menu_item_label {
flex: 1;
}
.menu_item .menu_item_expand_icon {
margin-left: 16px;
font-size: 6px;
width: 10px;
}
.menu_item__available {
color: #606266;
cursor: pointer;
}
.menu_item__available:hover {
background: #ecf5ff;
color: #409eff;
}
.menu_item__disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.menu_item_expand {
background: #ecf5ff;
color: #409eff;
}
</style><style>
.contextmenu-submenu-fade-enter-active,
.contextmenu-submenu-fade-leave-active {
transition: opacity 0.1s;
}
.contextmenu-submenu-fade-enter,
.contextmenu-submenu-fade-leave-to {
opacity: 0;
}
</style>
components/page/bmenu/constant.js 0 → 100644
View file @ 637f96b3
export const SUBMENU_X_OFFSET = 3;
export const SUBMENU_Y_OFFSET = -8;
export const SUBMENU_OPEN_TREND_LEFT = "left";
export const SUBMENU_OPEN_TREND_RIGHT = "right";
export const COMPONENT_NAME = "contextmenu-submenu";
components/page/bmenu/index.vue 0 → 100644
View file @ 637f96b3
<template>
<div class="ib">
<template>
右键菜单
</template>
</div>
</template>
<script>
import Vue from "vue";
import {
getElementsByClassName
} from "util";
import {
COMPONENT_NAME
} from "constant";
export default {
data() {
return {
items: [],
position: {
x: 0,
y: 0
},
style: {
zIndex: 2,
minWidth: 150
},
mainMenuInstance: null,
customClass: null,
mouseListening: false,
};
},
mounted() {
const SubmenuConstructor = Vue.component(COMPONENT_NAME);
this.mainMenuInstance = new SubmenuConstructor();
this.mainMenuInstance.items = this.items;
this.mainMenuInstance.commonClass = {
menu: this.$style.menu,
menuItem: this.$style.menu_item,
clickableMenuItem: this.$style.menu_item__clickable,
unclickableMenuItem: this.$style.menu_item__unclickable
};
this.mainMenuInstance.position = {
x: this.position.x,
y: this.position.y,
width: 0,
height: 0
};
this.mainMenuInstance.style.minWidth = this.style.minWidth;
this.mainMenuInstance.style.zIndex = this.style.zIndex;
this.mainMenuInstance.customClass = this.customClass;
this.mainMenuInstance.$mount();
document.body.appendChild(this.mainMenuInstance.$el);
this.addListener();
},
destroyed() {
this.removeListener();
if (this.mainMenuInstance) {
this.mainMenuInstance.close();
}
},
methods: {
mousewheelListener() {
this.$destroy();
},
mouseDownListener(e) { //右键点击
let el = e.target;
const menus = getElementsByClassName(this.$style.menu);
while (!menus.find(m => m === el) && el.parentElement) {
el = el.parentElement;
}
if (!menus.find(m => m === el)) {
this.$destroy();
}
},
mouseClickListener(e) { //左键点击
console.log(e)
let el = e.target;
const menus = getElementsByClassName(this.$style.menu);
const menuItems = getElementsByClassName(this.$style.menu_item);
const unclickableMenuItems = getElementsByClassName(
this.$style.menu_item__unclickable
);
while (
!menus.find(m => m === el) &&
!menuItems.find(m => m === el) &&
el.parentElement
) {
el = el.parentElement;
}
if (menuItems.find(m => m === el)) {
if (e.button !== 0 || unclickableMenuItems.find(m => m === el)) {
return;
}
this.$destroy();
return;
}
// if (!menus.find(m => m === el)) {
//this.$destroy();
//}
},
addListener() {
if (!this.mouseListening) {
document.addEventListener("click", this.mouseClickListener);
document.addEventListener("mousedown", this.mouseDownListener);
document.addEventListener("mousewheel", this.mousewheelListener);
this.mouseListening = true;
}
},
removeListener() {
if (this.mouseListening) {
document.removeEventListener("click", this.mouseClickListener);
document.removeEventListener("mousedown", this.mouseDownListener);
document.removeEventListener("mousewheel", this.mousewheelListener);
this.mouseListening = false;
}
}
}
};
</script>
<style>
.menu,
.menu_item,
.menu_item__clickable,
.menu_item__unclickable {
box-sizing: border-box;
}
</style>
components/page/bmenu/util.js 0 → 100644
View file @ 637f96b3
export function hasClass(el, className) {
if (!className) {
return true;
}
if (!el || !el.className || typeof el.className !== 'string') {
return false;
}
for (let cn of el.className.split(/\s+/)) {
if (cn === className) {
return true;
}
}
return false;
}
export function getElementsByClassName(className) {
let els = [];
for (let el of document.getElementsByClassName(className) || []) {
els.push(el);
}
return els;
}
export function uuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
npm-shrinkwrap.json
View file @ 637f96b3
...@@ -5190,6 +5190,11 @@ ...@@ -5190,6 +5190,11 @@
"bluebird": "^3.1.1" "bluebird": "^3.1.1"
} }
}, },
"constant": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/constant/download/constant-1.0.2.tgz",
"integrity": "sha1-xF1W59813dTzxqqgEC+wRCorIWE="
},
"constants-browserify": { "constants-browserify": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
...@@ -22761,6 +22766,11 @@ ...@@ -22761,6 +22766,11 @@
"resolved": "http://r.cnpmjs.org/vue-client-only/download/vue-client-only-2.0.0.tgz", "resolved": "http://r.cnpmjs.org/vue-client-only/download/vue-client-only-2.0.0.tgz",
"integrity": "sha1-3a2NZ17gLHYaFCKfDkQOIZ3h2hw=" "integrity": "sha1-3a2NZ17gLHYaFCKfDkQOIZ3h2hw="
}, },
"vue-contextmenujs": {
"version": "1.3.13",
"resolved": "https://registry.npm.taobao.org/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz",
"integrity": "sha1-O9rgI8e9QgleeNpCWAACUNUKuO8="
},
"vue-echarts": { "vue-echarts": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "http://r.cnpmjs.org/vue-echarts/download/vue-echarts-4.1.0.tgz", "resolved": "http://r.cnpmjs.org/vue-echarts/download/vue-echarts-4.1.0.tgz",
......
package.json
View file @ 637f96b3
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"area-data": "^5.0.6", "area-data": "^5.0.6",
"awe-dnd": "^0.3.4", "awe-dnd": "^0.3.4",
"better-scroll": "^1.12.1", "better-scroll": "^1.12.1",
"constant": "^1.0.2",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"dayjs": "^1.8.27", "dayjs": "^1.8.27",
"echarts": "^4.9.0", "echarts": "^4.9.0",
...@@ -43,6 +44,7 @@ ...@@ -43,6 +44,7 @@
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"view-design": "^4.1.3", "view-design": "^4.1.3",
"vue-baidu-map": "^0.21.22", "vue-baidu-map": "^0.21.22",
"vue-contextmenujs": "^1.3.13",
"vue-echarts": "^4.0.3", "vue-echarts": "^4.0.3",
"vue-i18n": "^8.15.5", "vue-i18n": "^8.15.5",
"vue-json-viewer": "^2.2.8", "vue-json-viewer": "^2.2.8",
......
pages/mesPlan/index.vue
View file @ 637f96b3
...@@ -490,6 +490,7 @@ export default { ...@@ -490,6 +490,7 @@ export default {
}, //确定后返回数据 }, //确定后返回数据
wfstatu: 1, //流程是否启用1 禁用 0启用 wfstatu: 1, //流程是否启用1 禁用 0启用
amountNew: 0, amountNew: 0,
}; };
}, },
created() { created() {
......
pages/test/index.vue
View file @ 637f96b3
<template> <template>
<div class="test"> <div class="test">
hi hi
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: '', name: 'test',
data() { data() {
return { return {
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
......
pages/test/test2.vue 0 → 100644
View file @ 637f96b3
<template>
<div style="width:100%;">
<h2>SubMenu</h2>
<p><Button @click="showBmenu">showMenu</Button></p>
<Submenus :show="showStatu" :data="tempItems"></Submenus>
</div>
</template>
<script>
export default {
layout: 'empty',
name: "test2",
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: "翻译成繁体中文"
},
],
},
],
useCustomClass: false,
nametitle: 'contextmenu-submenu',
level: '',
};
},
mounted() {
},
methods: {
showBmenu() {
this.showStatu = true;
this.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: "翻译成繁体中文"
},
],
},
]
}
},
};
</script>
pages/test/u.vue
View file @ 637f96b3
<template> <template>
<div> <div>
<state code="plan.order.status" value="1" type="tag"></state> <state code="plan.order.status" value="1" type="tag"></state>
<br />单选按钮(数据来源于数据字典)： <br />单选按钮(数据来源于数据字典)：
<radioButton code="Test.but.statusOper" v-model="statusNew" @on-change="radioChange"></radioButton> <radioButton code="Test.but.statusOper" v-model="statusNew" @on-change="radioChange"></radioButton>
...@@ -24,28 +24,34 @@ ...@@ -24,28 +24,34 @@
<p> <p>
{{user}} {{user}}
</p> </p>
<h2>时间展示</h2> <h2>时间展示</h2>
<DTSpan type="date" v-model="testDate"></DTSpan> <DTSpan type="date" v-model="testDate"></DTSpan>
<h2>时间段展示</h2><!-- 默认为datetime类型，可设置为date型，type="date";默认展示快捷时间段，包括当天、本周、本月，如不需要:showFast="false" --> <h2>时间段展示</h2><!-- 默认为datetime类型，可设置为date型，type="date";默认展示快捷时间段，包括当天、本周、本月，如不需要:showFast="false" -->
<DTSearch v-model="testDate1" @on-change="setTime" type="date" ></DTSearch> <DTSearch v-model="testDate1" @on-change="setTime" type="date"></DTSearch>
<div> <div>
<i-switch v-model="witch"/> <i-switch v-model="witch" />
</div> </div>
<div style="text-align:center"> <div style="text-align:center">
<DepartmentSelect :type="3"/> <DepartmentSelect :type="3" />
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
layout: 'empty', layout: 'empty',
async fetch({ store, params }) { name: 'u',
async fetch({
store,
params
}) {
await store.dispatch('loadDictionary') // 加载数据字典 await store.dispatch('loadDictionary') // 加载数据字典
}, },
data() { data() {
return { return {
user: 0, user: 0,
witch:false, witch: false,
parms: { parms: {
app: 'bug', //服务名 app: 'bug', //服务名
eid: '10000', //数据的id eid: '10000', //数据的id
...@@ -61,7 +67,8 @@ export default { ...@@ -61,7 +67,8 @@ export default {
inputSearch1: '', inputSearch1: '',
//上传文件配置结束 //上传文件配置结束
testDate: '2029-12-10 15:23:25', testDate: '2029-12-10 15:23:25',
testDate1:[] testDate1: [],
} }
}, },
methods: { methods: {
......
plugins/iview.js
View file @ 637f96b3
...@@ -19,6 +19,8 @@ import '@/styles/index.less'; ...@@ -19,6 +19,8 @@ import '@/styles/index.less';
import 'viewerjs/dist/viewer.css' import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer' import Viewer from 'v-viewer'
//图标样式 //图标样式
import '@/src/assets/icon/iconfont.css' import '@/src/assets/icon/iconfont.css'
...@@ -78,7 +80,10 @@ import WordTree from '@/components/page/wordTree.vue' ...@@ -78,7 +80,10 @@ import WordTree from '@/components/page/wordTree.vue'
import Actions from '@/components/page/actions.vue' import Actions from '@/components/page/actions.vue'
import DateRange from '@/components/page/dateRange.vue' import DateRange from '@/components/page/dateRange.vue'
import FilesViewer from '@/components/page/filesViewer.vue' import FilesViewer from '@/components/page/filesViewer.vue'
import Bmenu from '@/components/page/bmenu'
import Submenus from '@/components/page/bmenu/components/Submenu'
import Contextmenu from "vue-contextmenujs"
// import FormMaking from 'form-making' // import FormMaking from 'form-making'
...@@ -110,6 +115,8 @@ Vue.use(XLSX) ...@@ -110,6 +115,8 @@ Vue.use(XLSX)
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.component("Tools", Tools) Vue.component("Tools", Tools)
Vue.component("Bmenu", Bmenu)
Vue.component("Submenus", Submenus)
Vue.component("State", State) Vue.component("State", State)
Vue.component("Dictionary", Dictionary) Vue.component("Dictionary", Dictionary)
Vue.component("radioButton", radioButton) Vue.component("radioButton", radioButton)
...@@ -161,7 +168,7 @@ Vue.component("Actions", Actions) ...@@ -161,7 +168,7 @@ Vue.component("Actions", Actions)
Vue.component("DateRange", DateRange) Vue.component("DateRange", DateRange)
Vue.component("Life", Life) Vue.component("Life", Life)
Vue.component("FilesViewer",FilesViewer) Vue.component("FilesViewer",FilesViewer)
Vue.use(Contextmenu);
//注入mock //注入mock
// require("../mock") // require("../mock")
......
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