Optimize code

Signed-off-by: Jianhui Zhao <jianhuizhao329@gmail.com>

assets/package.json

@@ -15,6 +15,7 @@
     "simple-websocket": "^7.0.2",
     "string-format-easy": "^1.0.1",
     "vue": "^2.5.13",
+    "vue-contextmenu-easy": "^1.0.0",
     "xterm": "^3.1.0"
   },
   "devDependencies": {

assets/src/App.vue

@@ -2,9 +2,9 @@
     <div id="app">
         <Input v-if="!terminal.show" v-model="searchString" icon="search" size="large" @on-change="handleSearch" placeholder="Please enter the filter key..." style="width: 400px" />
         <Table v-if="!terminal.show" :loading="devices.loading" :height="devices.height" :columns="devlistTitle" :data="devices.filtered" style="width: 100%"></Table>
-        <div ref="terminal" class="terminal" v-if="terminal.show" @contextmenu="$vuecontextmenu($event, $root)"></div>
+        <div ref="terminal" class="terminal" v-if="terminal.show" @contextmenu="$vuecontextmenu()"></div>
         <Spin size="large" fix v-if="terminal.loading"></Spin>
-        <vue-context-menu :contextMenuData="contextMenuData" @handleContextMenu="handleContextMenu"></vue-context-menu>
+        <VueContextMenu :menulists="menulists" @contentmenu-click="contentmenuClick"></VueContextMenu>
         <Modal v-model="upfile.modal" width="360" :mask-closable="false" @on-cancel="cancelUpfile">
             <p slot="header"><span>Upload file to device</span></p>
             <Upload :before-upload="beforeUpload" action="">
@@ -40,23 +40,21 @@ Terminal.applyAddon(fit);
 export default {
     data() {
         return {
-            contextMenuData: {
-                menulists: [
-                    {
-                        name: 'upfile',
-                        caption: 'Upload file to device'
-                    },{
-                        name: 'downfile',
-                        caption: 'Download file from device'
-                    },{
-                        name: 'increasefontsize',
-                        caption: 'Increase font size'
-                    },{
-                        name: 'decreasefontsize',
-                        caption: 'Decrease font size'
-                    }
-                ]
-            },
+            menulists: [
+                {
+                    name: 'upfile',
+                    caption: 'Upload file to device'
+                },{
+                    name: 'downfile',
+                    caption: 'Download file from device'
+                },{
+                    name: 'increasefontsize',
+                    caption: 'Increase font size'
+                },{
+                    name: 'decreasefontsize',
+                    caption: 'Decrease font size'
+                }
+            ],
             searchString: '',
             terminal: {loading: false, show: false, term: null, recvCnt: 0},
             devices: {loading: true, height: document.body.offsetHeight - 20, list: [], filtered: []},
@@ -139,7 +137,7 @@ export default {
                 return d.id.indexOf(this.searchString) > -1 || d.description.indexOf(this.searchString) > -1;
             });
         },
-        handleContextMenu(name) {
+        contentmenuClick(name) {
             let changeFontSize = 0;
             if (name == 'upfile') {
                 this.upfile = {modal: true, loading: false, file: null, step: 2048, pos: 0, canceled: false, percent: 0};

assets/src/main.js

@@ -6,7 +6,7 @@ import iView from 'iview'
 import 'iview/dist/styles/iview.css'
 import locale from 'iview/dist/locale/en-US';
 import 'string-format-easy'
-import VueContextMenu from '../vue-contextmenu'
+import VueContextMenu from 'vue-contextmenu-easy'
 
 Vue.config.productionTip = false
 

assets/vue-contextmenu/VueContextMenu.vue

@@ -1,89 +0,0 @@
-<template>
-    <div ref="contextmenu" class="contextmenu-content" :style="axisComputed" v-if="show" contextmenu='1'>
-        <a v-for="item in contextMenuData.menulists" @click.stop="menuHandler(item)">{{item.caption}}</a>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                show: false,
-                axis: {x: 0, y: 0}
-            }
-        },
-        props: {
-            contextMenuData: {
-                type: Object,
-                requred: true
-            },
-            tag: {
-                type: String,
-                requred: false
-            }
-        },
-        mounted() {
-            this.$root.$on('showVueContextMenu', (args) => {
-                if (args.tag == this.tag) {
-                    this.show = true
-                    this.axis = {x: args.x, y: args.y};
-                }
-            });
-
-            document.addEventListener('mousedown', (e) => {
-                if (e.target.tagName == 'A')
-                    return;
-                this.show = false;
-            }, true);
-        },
-        updated() {
-            if (this.$refs.contextmenu) {
-                let bw = document.body.offsetWidth;
-                let bh = document.body.offsetHeight;
-                let width = this.$refs.contextmenu.offsetWidth;
-                let height = this.$refs.contextmenu.offsetHeight;
-
-                if (this.axis.x + width >= bw)
-                    this.axis.x = bw - width;
-
-                if (this.axis.y + height >= bh)
-                    this.axis.y = bh - height;
-            }
-        },
-        computed: {
-            axisComputed() {
-                return {
-                    top: this.axis.y + 'px',
-                    left: this.axis.x + 'px'
-                }
-            }
-        },
-        methods: {
-            menuHandler (item) {
-                this.show = false;
-                this.$emit('handleContextMenu', item.name);
-            }
-        }
-    }
-</script>
-
-<style scoped>
-    .contextmenu-content {
-        position: fixed;
-        z-index: 9999;
-        background-color: #f9f9f9;
-        min-width: 160px;
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    }
-
-    .contextmenu-content a {
-        color: black;
-        padding: 5px 16px;
-        text-decoration: none;
-        display: block;
-    }
-
-    .contextmenu-content a:hover {
-        background-color: #90C8F6;
-    }
-</style>

assets/vue-contextmenu/index.js

@@ -1,24 +0,0 @@
-import VueContextMenuComponent from './VueContextMenu.vue'
-
-const VueContextMenu  = {
-	install: function (Vue) {
-		Vue.component('VueContextMenu', VueContextMenuComponent)
-
-		Vue.prototype.$vuecontextmenu = function (e, root, id) {
-			e.stopPropagation();
-			e.preventDefault();
-
-			root.$emit('showVueContextMenu', {
-				id: id,
-				x: e.clientX,
-				y: e.clientY
-			})
-		}
-	}
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.use(VueContextMenu)
-}
-
-export default VueContextMenu