context-menu-container.vue 1.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<template>
    <div class='context-menu-container' ref='container'>
        <slot></slot>
    </div>
</template>

<script lang="ts">
class ContextMenuContainerService {
    // 是否屏蔽浏览器右键单机
    public __isShielding = false;

    constructor() {
        document.oncontextmenu = () => {
            return !this.__isShielding;
        };
    }

    public enableShielding() {
        this.__isShielding = true;
    }

    public notEnableShielding() {
        this.__isShielding = false;
    }
}

const service = new ContextMenuContainerService();

import { Vue, Component, Provide } from 'vue-property-decorator';

// tslint:disable-next-line:max-classes-per-file
@Component({})
export default class ContextMenuContainer extends Vue {
    @Provide()
    public isShielding: boolean = false;

    public mounted() {
        const container: any = this.$refs.container;
        // 鼠标移入
        container.onmouseover = () => {
            service.enableShielding();
        };
        // 鼠标移出
        container.onmouseout = () => {
            service.notEnableShielding();
        };
    }

}
</script>

<style lang='less'>

</style>