right menu

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "element-ui": "^2.4.7",
+    "font-awesome": "^4.7.0",
     "node-sass": "^4.9.3",
     "normalize.css": "^8.0.0",
     "sass-loader": "^7.1.0",
@@ -56,7 +57,7 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
+    "url-loader": "^1.1.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",

src/components/Graph.vue

@@ -46,10 +46,13 @@
         </g>
       </svg>
     </div>
+    <RightMenu></RightMenu>
   </div>
 </template>
 
 <script>
+import RightMenu from './RightMenu'
+
 var nodeId = 3
 var edgeId = 2
 const svgDx = 165
@@ -79,6 +82,9 @@ export default {
       require: true
     }
   },
+  components: {
+    RightMenu
+  },
   methods: {
     edgeData: function (edge) {
       return 'M' + edge.source.x + ',' + edge.source.y +

src/components/GraphProp.vue

@@ -78,6 +78,9 @@ ul li span {
   width: 40%;
   color: gray;
 }
+ul li span:first-of-type {
+  width: 20%;
+}
 
 .prop-title {
   line-height: 40px;

src/components/RightMenu.vue

@@ -0,0 +1,50 @@
+<template>
+  <ul>
+    <li>
+      <i class="el-icon-close"></i>删除
+    </li>
+    <li>
+      <i class="fa fa-book" aria-hidden="true"></i>属性
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+  ul {
+    position: absolute;
+    top: 100px;
+    left: 200px;
+    width: 70px;
+    padding: 2px 4px;
+    border: 1px solid #4481bf;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    color: #4481bf;
+    user-select: none;
+    font-size: 12px;
+  }
+
+  ul li {
+    text-align: center;
+    list-style-type: none;
+    padding: 4px 2px;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+
+  ul li:hover {
+    background-color: #d4d4d4;
+    color: #0a6db3;
+  }
+
+  ul li i {
+    margin-right: 6px;
+  }
+</style>

src/main.js

@@ -2,7 +2,9 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 
+// 导入样式
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import 'font-awesome/scss/font-awesome.scss'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'