vue-menu
vue-menu copied to clipboard
Published
20 hours ago •
michitaro
michitaro
when open a contextMenu should close other contextMenu
I have a list, when right click a list item, open a menu, but it should like browser's behavior, when open a contextMenu should close other contextMenu, if not, multiple contextMenu is weird, see the following picture.(sorry for my poor English, hope you already understand)
I understand your demand. There should not be 2 or more context menus at the same time. That true.
I don't know why, when I upgrade to 2.10.0, it cause errors, back to 2.8.x is ok
code is like this:
// export as vioTheme
import { StyleFactory } from '@hscmap/vue-menu';
export default StyleFactory(
(() => {
const base = {
backgroundColor: 'rgba(255, 255, 255, 1)',
color: 'black',
boxShadow: '0 2pt 6pt rgba(0, 0, 0, 0.5)',
lineHeight: '21px'
};
return {
menu: base,
menubar: base,
separator: { backgroundColor: 'rgba(127, 127, 127, 0.5)' },
active: { backgroundColor: '#0275d8', color: '#fff' },
disabled: { opacity: '0.5' },
animation: false
};
})()
);
HTML:
<div class="chart-editor-key-columns">
<header>维度</header>
<vioTheme class="context-menu-wrapper">
<ul ref="key-columns">
<li
slot="reference"
v-for="(column, i) in keyColumns"
:key="i"
:class="{
'chart-editor-key-columns-checked': keyColumnCheckedStatus[i],
'chart-editor-key-columns-using-dimension': usingListFromDimension.some(e => e === column.name),
'chart-editor-key-columns-using-group': usingListFromGroup.some(e => e === column.name)
}"
draggable="true"
@dragstart="dragstartHandler(column, i, $event)"
@dragend="dragendHandler"
>
<hsc-menu-context-menu @contextmenu.native.stop :menuZIndex="999">
<div class="context-menu-sub-wrapper" @click="columnClickHandler(i)">
<i :class="getIconClassesByType(column.cast || column.type)" class="column-type-icon"></i>
<Tooltip placement="top" :content="`${column.alias}(${column.name})`" :delay="300">
<span class="column-alias" slot="reference">{{ column.alias || column.name }}</span>
</Tooltip>
<Tooltip placement="top" content="点击快速进行智能分析" :delay="300" v-if="showIntelligentAnalysisIcon(column) && columnHasOneModel(column)">
<i class="iconfont icon-chart intelligent_analysis_icon" :class="intelligentAnalysisIconClass" slot="reference" @click.stop="setIntelligentAnalysis(column)"></i>
</Tooltip>
<el-popover v-if="showIntelligentAnalysisIcon(column) && columnHasMultiModel(column)" placement="right" width="200" trigger="click">
<div>请选择:</div>
<div v-for="model in findColumnModel(column, dataModel)" :key="model" class="select-model" @click="setIntelligentAnalysis(column, model)">{{ DataModelsNameMap[model] }}</div>
<i class="iconfont icon-chart intelligent_analysis_icon" :class="intelligentAnalysisIconClass" @click.stop="" slot="reference"></i>
</el-popover>
<Tooltip v-if="showDiscardIntelligentAnalysisIcon(column)" placement="top" content="点击取消智能分析" :delay="300">
<i class="iconfont icon-chart intelligent_analysis_icon" @click.stop="discardIntelligentAnalysis(column)" slot="reference"></i>
</Tooltip>
</div>
<template slot="contextmenu">
<hsc-menu-item label="数据模型" :sync="true" v-if="!isSetIntelligentAnalysis && type !== 'sql'">
<hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.sellerId)}商家ID`" :sync="true" @click="setDataModel(column, DataModels.sellerId)"> </hsc-menu-item>
<hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.buyerId)}买家ID`" :sync="true" @click="setDataModel(column, DataModels.buyerId)"> </hsc-menu-item>
<!-- <hsc-menu-item label="地理角色" :sync="true">
<hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.longitude)}经度`" @click="setDataModel(column, DataModels.longitude)" />
<hsc-menu-item :label="`️️️${getSelectedDataModelTag(column, DataModels.latitude)}️纬度`" @click="setDataModel(column, DataModels.latitude)" />
<hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.position)}位置`" @click="setDataModel(column, DataModels.position)" />
<hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.geographicValue)}关联值`" @click="setDataModel(column, DataModels.geographicValue)" />
</hsc-menu-item> -->
</hsc-menu-item>
</template>
</hsc-menu-context-menu>
</li>
</ul>
</vioTheme>
</div>
I could not reproduce the problem. Could you provide a minimal repository that reproduce the problem?
Do you use this library with electron? If so, this can be related to #5.
Thank you for the information, but I couldn't find the cause of the problem. Could you make changes on this so that it reproduce the problem? The repository contains minimal code for vue-menu things. I can't debug them until the error occurs in my laptop.
Can I have your package-lock.json and package.json? I have an interest in the dependencies.
thank you @michitaro , but sorry for that I can't reproduce the problem when contains minimal code. maybe I will write a context menu components for myself. Thanks for being so patient anyway.
{
"name": "vio",
"version": "1.0.0",
"description": "sd",
"main": "index.js",
"scripts": {
"kv": "kv dev",
"dev": "kv dev & node start.js",
"watch": "nodemon --inspect start.js",
"test:unit": "jest",
"test:e2e": "npm run cypress:run",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"ts:build": "tsc || echo done",
"ts:watch": "tsc -w",
"ts": "npm run ts:watch",
"build": "npm run clean && npm run ts:build && npm run gen-wrapper && npm run pre-compile",
"clean": "ls -a && rm -rf .tmp && rm -rf build",
"pre-compile": "NODE_ENV=dev node start build",
"gen-wrapper": "touch wrapper.ejs",
"trace": "node start close && node start &> trace.txt",
"doc": "typedoc --includeDeclarations --excludeExternals --ignoreCompilerErrors --out ./_/dev_doc ./service",
"format": "npx prettier --tab-width 4 --single-quote --write \"pages/**/*.{ts,less,vue}\" \"db/**/*.ts\" \"service/**/*.ts\" \"config/*.js\"",
"test:datasource": "mocha test/dataSource/test.spec.js --timeout 80000"
},
"nodemonConfig": {
"ignore": [
"build/*",
"pages/*",
"test/*",
".tmp/*",
".minicodetmp/*",
"buildFileInfo.json"
],
"delay": "2500"
},
"repository": {
"type": "git",
"url": "ssh://[email protected]:60022/n/vio.git"
},
"keywords": [
"VIO",
"Weidian"
],
"author": "VIO",
"license": "ISC",
"dependencies": {
"@vdian/agentools": "^1.0.22",
"@vdian/commons": "^1.1.7",
"@vdian/midlog": "0.0.23",
"@vdian/qcloud": "1.0.2",
"@vdian/redis-client": "0.0.6",
"@vdian/rocker-dao": "^1.3.2",
"@vdian/rocker-mvc": "^1.3.18",
"@vdian/rocker-mvc-render-plugin": "^0.4.7",
"@vdian/rocker-wdr": "0.0.6",
"@vdian/rocketmq": "0.0.7",
"@vdian/rpc": "^0.2.9",
"@vdian/tracer": "0.0.14",
"@vdian/vc-common-comlib": "^0.1.1",
"@vdian/vc-spec": "^0.2.1",
"@vdian/vc-sql-comlib": "^0.1.0",
"@vdian/vip-client": "^1.0.3",
"@vdian/hotpot": "^0.1.19",
"axios": "^0.18.0",
"backstab": "0.0.1",
"core-js": "^2.5.3",
"elasticsearch": "^15.3.0",
"filepaths": "^0.3.0",
"formidable": "^1.1.1",
"fs-path": "0.0.24",
"is-number": "^7.0.0",
"koa": "^2.6.2",
"lodash": "^4.17.5",
"mkdirp": "^0.5.1",
"moment": "^2.20.0",
"node-schedule": "^1.3.0",
"node-xlsx": "^0.12.1",
"pinyin": "^2.8.3",
"pinyin-engine": "^1.1.0",
"qs": "^6.5.2",
"ramda": "^0.26.1",
"redis": "^2.8.0",
"request": "^2.83.0",
"request-promise-native": "^1.0.5",
"resize-detector": "^0.2.0",
"rulejs": "^0.2.0",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"uuid": "^3.1.0",
"simple-array-diff": "^1.1.0",
"d3-force-graph": "latest"
},
"devDependencies": {
"regenerator-runtime": "^0.12.0",
"@types/chai": "^4.1.4",
"@types/lodash": "^4.14.105",
"@types/mocha": "^5.2.4",
"@types/node": "^7.0.60",
"@types/ramda": "github:types/npm-ramda#dist",
"@types/jquery": "^3.3.10",
"@types/koa": "^2.0.46",
"@types/request": "^2.47.1",
"@types/socket.io": "^1.4.36",
"@types/webpack-env": "^1.13.6",
"@vue/test-utils": "^1.0.0-beta.25",
"babel-jest": "^23.6.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"mini-css-extract-plugin": "^0.4.0",
"chai": "^4.1.2",
"cypress": "3.1.0",
"husky": "^1.3.1",
"jest": "^23.6.0",
"mocha": "^5.2.0",
"nodemon": "^1.18.9",
"power-assert": "^1.6.1",
"prettier": "1.16.1",
"pretty-quick": "^1.8.0",
"ts-jest": "^23.10.4",
"typedoc": "^0.12.0",
"typescript": "^2.7.2",
"vue-jest": "^3.0.0",
"less": "^2.7.3",
"d3": "^3.5.17",
"d3-array": "^1.2.4",
"dc": "^2.2.0",
"3d-force-graph": "^1.39.0",
"force-graph": "^1.8.0",
"@antv/data-set": "^0.8.9",
"@antv/g2": "3.2.8",
"@antv/g2-plugin-slider": "2.1.0",
"simple-web-worker": "^1.2.0",
"monaco-editor": "^0.14.3",
"monaco-editor-webpack-plugin": "^1.5.2",
"html-webpack-plugin": "^3.2.0",
"three": "^0.95.0",
"stats-webpack-plugin": "^0.7.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"raw-loader": "^0.5.1",
"xlsx": "^0.12.13",
"vue": "^2.5.17",
"promise.prototype.finally": "^3.1.0",
"vue-class-component": "^6.3.2",
"vue-codemirror": "^4.0.3",
"vue-grid-layout": "^2.1.10",
"vue-property-decorator": "^7.3.0",
"vue-server-renderer": "^2.5.16",
"vuex": "^2.5.0",
"element-ui": "^1.4.13",
"@vdian/vda-loader": "^2.5.0",
"@vdian/vc-designer": "^2.0.0-alpha.35",
"@vdian/vue.ex": "^1.3.4",
"popper.js": "^1.14.3",
"numbro": "^1.11.1",
"blueimp-md5": "^2.10.0",
"codemirror": "^5.33.0",
"codemirror-minified": "^5.37.0",
"@babel/core": "^7.0.0-beta.53",
"@babel/preset-env": "^7.0.0-beta.53",
"@babel/traverse": "^7.2.3",
"babel-loader": "^8.0.0-beta.4",
"babylon": "^6.18.0",
"@hscmap/vue-menu": "2.8.1"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"jest": {
"verbose": true,
"moduleFileExtensions": [
"js",
"json",
"vue",
"ts"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(@vdian/hotpot))"
],
"testRegex": "(/__tests__/.*)\\.spec\\.(jsx?|tsx?)$",
"globals": {
"vue-jest": {
"babelConfig": {
"presets": [
[
"env",
{
"modules": false
}
]
],
"plugins": [
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
],
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
},
"ts-jest": {
"diagnostics": false
}
}
}
}
here is the package.json, I re-install many times so the package.lock.json may deosn't matter(and it's too large to paset here). I use the local npm registry in my company, so some of package dependence you can't install it(it's private)