Merge pull request #20 from FairyEver/dev

v-contextmenu

Former-commit-id: 1aa003ccce8b43491b17311befc45dadbb037c0f [formerly 1aa003ccce8b43491b17311befc45dadbb037c0f [formerly 1aa003ccce8b43491b17311befc45dadbb037c0f [formerly 1aa003ccce8b43491b17311befc45dadbb037c0f [formerly 2881a49b466bb5a755bd37dd838c855e6bb463be [formerly f30c60e8218ea8ffc9c9c269f73f8ed8a62884a3]]]]]
Former-commit-id: 68eab2b2ae61226bfd744e843bfbd9f92284c03f
Former-commit-id: ec0bb67da5c360805e5052024aa2e73fd0442ba0
Former-commit-id: 9341359a302ac3955197adbde35ff3770d688978 [formerly eaead427e333bd31949df26ff80558760d699be1]
Former-commit-id: 1d5239dc0dfc1dcd1d0618db5af71a15b2397e0b
Former-commit-id: 66e24272022280d0442ecc1784adbcbd1616726c
Former-commit-id: 7837727f4bde040c1efda9185069b88bbb475b50
Former-commit-id: c95b4d7e24dbaf241df6b6a54dc294444db1bbd7
Former-commit-id: a3ccb6e2c2da7efe12079808612864849844cba7

package.json

@@ -33,6 +33,7 @@
     "path-posix": "^1.0.0",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
+    "v-contextmenu": "^2.7.0",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",
     "vue-i18n": "^7.4.2",

src/components/core/d2-layout-main/components/-help/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-tooltip effect="dark" content="疑问" placement="bottom">
+      <el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
+        <d2-icon name="question-circle"/>
+      </el-button>
+    </el-tooltip>
+    <el-dialog title="帮助" width="600px" :visible.sync="dialogVisible">
+      <div style="margin-top: -25px;">
+        <h1 class="d2-mt-0">如果你有问题可以加入交流群或者联系作者</h1>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-alert :closable="false" type="info" title="扫码进 QQ 群" class="d2-mb"/>
+            <img class="qr" src="/static/image/me/qq.jpg">
+          </el-col>
+          <el-col :span="12">
+            <el-alert :closable="false" type="info" title="作者微信 加好友拉进微信群" class="d2-mb"/>
+            <img class="qr" src="/static/image/me/we.jpg">
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+img {
+  &.qr {
+    width: 100%;
+  }
+}
+</style>

src/components/core/d2-layout-main/components/-theme/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <el-tooltip effect="dark" content="theme" placement="bottom">
+    <el-tooltip effect="dark" content="主题" placement="bottom">
       <el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
         <d2-icon name="diamond"/>
       </el-button>
     </el-tooltip>
     <el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
-      <d2-theme-list style="margin-top: -20px;"/>
+      <d2-theme-list style="margin-top: -25px;"/>
     </el-dialog>
   </div>
 </template>

src/components/core/d2-layout-main/index.vue

@@ -14,6 +14,7 @@
         <d2-layout-main-header-menu/>
         <!-- 顶栏右侧 -->
         <div class="d2-header-right">
+          <d2-layout-main-header-help/>
           <d2-layout-main-header-full-screen/>
           <d2-layout-main-header-theme/>
           <d2-layout-main-header-user/>
@@ -45,7 +46,8 @@ export default {
     'd2-layout-main-header-menu': () => import('./components/-header-menu'),
     'd2-layout-main-header-full-screen': () => import('./components/-full-screen'),
     'd2-layout-main-header-theme': () => import('./components/-theme'),
-    'd2-layout-main-header-user': () => import('./components/-user')
+    'd2-layout-main-header-user': () => import('./components/-user'),
+    'd2-layout-main-header-help': () => import('./components/-help')
   },
   data () {
     return {

src/main.js

@@ -33,6 +33,10 @@ import '@/mock/register'
 // vuex
 import store from '@/store/index.js'
 
+// 右键菜单
+import contentmenu from 'v-contextmenu'
+import 'v-contextmenu/dist/index.css'
+
 // 插件 导出文件
 import pluginImport from '@/plugin/import'
 // 插件 导出文件
@@ -45,6 +49,7 @@ import pluginOpen from '@/plugin/open'
 import bigdataTable from '@/plugin/vue-bigdata-table'
 
 Vue.use(ElementUI)
+Vue.use(contentmenu)
 
 Vue.use(pluginImport)
 Vue.use(pluginExport)

src/menu/index.js

@@ -95,6 +95,15 @@ const demoComponents = {
         { path: `${pre}markdown/url`, title: '异步加载文件' }
       ]
     },
+    {
+      path: `${pre}contextmenu`,
+      title: '右键菜单',
+      children: [
+        { path: `${pre}contextmenu/simple`, title: '基础' },
+        { path: `${pre}contextmenu/divier`, title: '分割线' },
+        { path: `${pre}contextmenu/group`, title: '按钮组' }
+      ]
+    },
     { path: `${pre}bigdata-table`, title: '百万数量级表格' },
     { path: `${pre}scrollbar`, title: 'ElementUI 滚动条组件' },
     { path: `${pre}countup`, title: '数字动画' },

src/pages/demo/components/contextmenu/divier.vue

@@ -0,0 +1,31 @@
+<template>
+  <d2-container>
+    <template slot="header">分割线</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/contextmenu/group.vue

@@ -0,0 +1,29 @@
+<template>
+  <d2-container>
+    <template slot="header">分割线</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group>
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-group>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="github"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="qq"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="weixin"/></v-contextmenu-item>
+        <v-contextmenu-item><d2-icon class="contextmenu-icon" name="google-plus"/></v-contextmenu-item>
+      </v-contextmenu-group>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item>菜单4</v-contextmenu-item>
+      <v-contextmenu-item>菜单5</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/contextmenu/simple.vue

@@ -0,0 +1,30 @@
+<template>
+  <d2-container>
+    <template slot="header">基础</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/contextmenu/style/pub.scss

@@ -0,0 +1,15 @@
+@import '~@/assets/style/public.scss';
+.contextmenu-pad {
+  height: 300px;
+  background-color: $color-bg;
+  border: 1px solid $color-border-1;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  color: $color-info;
+}
+.contextmenu-icon {
+  font-size: 16px;
+}

src/router/index.js.REMOVED.git-id

@@ -1 +1 @@
-ddf919108dc68f1f7811c033e619dd82d94ef14c
+ca9703fe75f6928e93a03443767f2b87cbe5ef2a

static/image/me/qq.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+e4c4364c1109dd3097159bfdb13171116c406f5d

static/image/me/we.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+12bb778e8779f32a46ee756e6dbb890024b40f5d