zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FIX scContextmenu 右键菜单 在特定场景中无法关闭

This commit is contained in:
sakuya 2022-05-30 20:18:38 +08:00
parent b1cc2f9a7a
commit ff578a8bdd
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/scContextmenu/index.vue
View File

@ -1,10 +1,10 @@
<!-- <!--
* @Descripttion: scContextmenu组件 * @Descripttion: scContextmenu组件
* @version: 1.0 * @version: 1.1
* @Author: sakuya * @Author: sakuya
* @Date: 2021年7月23日09:25:57 * @Date: 2021年7月23日09:25:57
* @LastEditors: * @LastEditors: sakuya
* @LastEditTime: * @LastEditTime: 2022年5月30日20:17:42
* @other: 代码完全开源，欢迎参考，也欢迎PR * @other: 代码完全开源，欢迎参考，也欢迎PR
--> -->
@ -34,17 +34,10 @@
}, },
watch: { watch: {
visible(value) { visible(value) {
var _this = this;
var cm = function(e){
let sp = _this.$refs.contextmenu
if(sp&&!sp.contains(e.target)){
_this.closeMenu()
}
}
if (value) { if (value) {
document.body.addEventListener('click', e=>cm(e)) document.body.addEventListener('click', this.cm, true)
}else{ }else{
document.body.removeEventListener('click', e=>cm(e)) document.body.removeEventListener('click', this.cm, true)
} }
} }
}, },
@ -52,6 +45,12 @@
}, },
methods: { methods: {
cm(e){
let sp = this.$refs.contextmenu
if(sp&&!sp.contains(e.target)){
this.closeMenu()
}
},
menuClick(command){ menuClick(command){
this.closeMenu() this.closeMenu()
this.$emit('command', command) this.$emit('command', command)
@ -89,7 +88,7 @@
</script> </script>
<style> <style>
.sc-contextmenu {position: fixed;z-index: 3000;} .sc-contextmenu {position: fixed;z-index: 3000;font-size: 12px;}
.sc-contextmenu__menu {display: inline-block;min-width: 120px;border: 1px solid #e4e7ed;background: #fff;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);z-index: 3000;list-style-type: none;padding: 10px 0;} .sc-contextmenu__menu {display: inline-block;min-width: 120px;border: 1px solid #e4e7ed;background: #fff;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);z-index: 3000;list-style-type: none;padding: 10px 0;}
.sc-contextmenu__menu > hr {margin:5px 0;border: none;height: 1px;font-size: 0px;background-color: #ebeef5;} .sc-contextmenu__menu > hr {margin:5px 0;border: none;height: 1px;font-size: 0px;background-color: #ebeef5;}
.sc-contextmenu__menu > li {margin:0;cursor: pointer;line-height: 30px;padding: 0 17px 0 10px;color: #606266;display: flex;justify-content: space-between;white-space: nowrap;text-decoration: none;position: relative;} .sc-contextmenu__menu > li {margin:0;cursor: pointer;line-height: 30px;padding: 0 17px 0 10px;color: #606266;display: flex;justify-content: space-between;white-space: nowrap;text-decoration: none;position: relative;}