完善构建

dependencies-cdn.js

@@ -27,19 +27,19 @@ module.exports = [
     name: '@d2-projects/d2-crud',
     library: 'D2Crud',
     css: '',
-    js: 'https://cdn.d2.pub/packages/@d2-projects/d2-crud@2.0.5/d2-crud.js'
+    js: 'https://unpkg.com/@d2-projects/d2-crud@2.1.2/dist/d2-crud.js'
   },
   {
     name: '@d2-projects/vue-table-export',
     library: 'VueTableExport',
     css: '',
-    js: 'https://cdn.d2.pub/packages/@d2-projects/vue-table-export@1.0.1/vue-table-export.js'
+    js: 'https://unpkg.com/@d2-projects/vue-table-export@1.0.1/dist/vue-table-export.js'
   },
   {
     name: '@d2-projects/vue-table-import',
     library: 'VueTableImport',
     css: '',
-    js: 'https://cdn.d2.pub/packages/@d2-projects/vue-table-import@1.0.0/vue-table-import.js'
+    js: 'https://unpkg.com/@d2-projects/vue-table-import@1.0.0/dist/vue-table-import.js'
   },
   {
     name: 'axios',
@@ -71,13 +71,6 @@ module.exports = [
     css: 'https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css',
     js: 'https://unpkg.com/element-ui@2.13.0/lib/index.js'
   },
-  // https://github.com/heynext/v-contextmenu/pull/72/commits
-  {
-    name: 'v-contextmenu',
-    library: 'VContextmenu',
-    css: 'https://unpkg.com/v-contextmenu/dist/index.css',
-    js: 'https://unpkg.com/v-contextmenu/dist/index.js'
-  },
   {
     name: 'vue-grid-layout',
     library: 'VueGridLayout',

src/main.js

@@ -11,9 +11,6 @@ import store from '@/store/index'
 import D2Crud from '@d2-projects/d2-crud'
 // [ 可选组件 ] 图表
 import VCharts from 'v-charts'
-// [ 可选组件 ] 右键菜单
-import contentmenu from 'v-contextmenu'
-import 'v-contextmenu/dist/index.css'
 // [ 可选组件 ] JSON 树状视图
 import vueJsonTreeView from 'vue-json-tree-view'
 // [ 可选组件 ] 网格布局
@@ -37,7 +34,6 @@ Vue.use(d2Admin)
 // 可选插件组件
 Vue.use(D2Crud)
 Vue.use(VCharts)
-Vue.use(contentmenu)
 Vue.use(vueJsonTreeView)
 Vue.use(pluginExport)
 Vue.use(pluginImport)

src/menu/modules/demo-components.js

@@ -82,19 +82,6 @@ export default {
         { path: `${pre}markdown/url`, title: '异步加载文件' }
       ]
     },
-    {
-      path: `${pre}contextmenu`,
-      title: '右键菜单',
-      icon: 'mouse-pointer',
-      children: [
-        { path: `${pre}contextmenu/simple`, title: '基础' },
-        { path: `${pre}contextmenu/divier`, title: '分割线' },
-        { path: `${pre}contextmenu/group`, title: '按钮组' },
-        { path: `${pre}contextmenu/submenu`, title: '子菜单' },
-        { path: `${pre}contextmenu/disabled`, title: '禁用' },
-        { path: `${pre}contextmenu/custom-trigger`, title: '自定义事件' }
-      ]
-    },
     { path: `${pre}countup`, title: '数字动画', icon: 'motorcycle' },
     { path: `${pre}highlight`, title: '代码高亮显示', icon: 'code' },
     { path: `${pre}json-tree`, title: 'JSON 展示', icon: 'sitemap' }

src/router/modules/components.js

@@ -22,12 +22,6 @@ export default {
     { path: 'container/card-slot', name: `${pre}container-card-slot`, component: _import('demo/components/container/card-slot.vue'), meta: { ...meta, title: '布局组件 卡片 插槽' } },
     { path: 'container/card-bs', name: `${pre}container-card-bs`, component: _import('demo/components/container/card-bs.vue'), meta: { ...meta, title: '布局组件 卡片 滚动优化' } },
     { path: 'container/api', name: `${pre}container-api`, component: _import('demo/components/container/api.vue'), meta: { ...meta, title: '布局组件 API' } },
-    { path: 'contextmenu/simple', name: `${pre}contextmenu-simple`, component: _import('demo/components/contextmenu/simple.vue'), meta: { ...meta, title: '右键菜单 基础' } },
-    { path: 'contextmenu/divier', name: `${pre}contextmenu-divier`, component: _import('demo/components/contextmenu/divier.vue'), meta: { ...meta, title: '右键菜单 分割线' } },
-    { path: 'contextmenu/group', name: `${pre}contextmenu-group`, component: _import('demo/components/contextmenu/group.vue'), meta: { ...meta, title: '右键菜单 分组' } },
-    { path: 'contextmenu/submenu', name: `${pre}contextmenu-submenu`, component: _import('demo/components/contextmenu/submenu.vue'), meta: { ...meta, title: '右键菜单 子菜单' } },
-    { path: 'contextmenu/disabled', name: `${pre}contextmenu-disabled`, component: _import('demo/components/contextmenu/disabled.vue'), meta: { ...meta, title: '右键菜单 禁用' } },
-    { path: 'contextmenu/custom-trigger', name: `${pre}contextmenu-custom-trigger`, component: _import('demo/components/contextmenu/custom-trigger.vue'), meta: { ...meta, title: '右键菜单 自定义触发' } },
     { path: 'countup', name: `${pre}countup`, component: _import('demo/components/countup'), meta: { ...meta, title: '数字动画' } },
     { path: 'editor-ueditor', name: `${pre}editor-ueditor`, component: _import('demo/components/editor-ueditor'), meta: { ...meta, title: 'UEditor' } },
     { path: 'editor-quill', name: `${pre}editor-quill`, component: _import('demo/components/editor-quill'), meta: { ...meta, title: '富文本编辑器' } },

src/views/demo/components/contextmenu/custom-trigger.vue

@@ -1,46 +0,0 @@
-<template>
-  <d2-container type="card">
-    <template slot="header">自定义事件</template>
-    <v-contextmenu ref="contextmenu">
-      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
-      <v-contextmenu-item divider></v-contextmenu-item>
-      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
-      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
-    </v-contextmenu>
-    <v-contextmenu ref="dbContextmenu" event-type="dblclick">
-      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
-      <v-contextmenu-item divider></v-contextmenu-item>
-      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
-      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
-    </v-contextmenu>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <div class="contextmenu-pad" v-contextmenu:contextmenu>
-          右键点击此区域
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="contextmenu-pad" v-contextmenu:dbContextmenu>
-          左键双击此区域
-        </div>
-      </el-col>
-    </el-row>
-  </d2-container>
-</template>
-
-<script>
-export default {
-  methods: {
-    handleClick (instance, event) {
-      this.$message({
-        message: `你点击了${instance.$slots.default[0].text}`,
-        type: 'info'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style/pub.scss';
-</style>

src/views/demo/components/contextmenu/disabled.vue

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

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

@@ -1,31 +0,0 @@
-<template>
-  <d2-container type="card">
-    <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 (instance, event) {
-      this.$message({
-        message: `你点击了${instance.$slots.default[0].text}`,
-        type: 'info'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style/pub.scss';
-</style>

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

@@ -1,39 +0,0 @@
-<template>
-  <d2-container type="card">
-    <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>
-
-<script>
-export default {
-  data () {
-    return {
-      filename: __filename
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style/pub.scss';
-</style>

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

@@ -1,30 +0,0 @@
-<template>
-  <d2-container type="card">
-    <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 (instance, event) {
-      this.$message({
-        message: `你点击了${instance.$slots.default[0].text}`,
-        type: 'info'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style/pub.scss';
-</style>

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

@@ -1,14 +0,0 @@
-.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/views/demo/components/contextmenu/submenu.vue

@@ -1,40 +0,0 @@
-<template>
-  <d2-container type="card">
-    <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-submenu title="菜单 3">
-        <v-contextmenu-item @click="handleClick">菜单 3-1</v-contextmenu-item>
-        <v-contextmenu-item divider></v-contextmenu-item>
-        <v-contextmenu-submenu title="菜单 3-2">
-          <v-contextmenu-item @click="handleClick">菜单 3-2-1</v-contextmenu-item>
-        </v-contextmenu-submenu>
-        <v-contextmenu-item @click="handleClick">菜单 3-3</v-contextmenu-item>
-        <v-contextmenu-item @click="handleClick">菜单 3-4</v-contextmenu-item>
-        <v-contextmenu-item @click="handleClick">菜单 3-5</v-contextmenu-item>
-      </v-contextmenu-submenu>
-    </v-contextmenu>
-    <div class="contextmenu-pad" v-contextmenu:contextmenu>
-      右键点击此区域
-    </div>
-  </d2-container>
-</template>
-
-<script>
-export default {
-  methods: {
-    handleClick (instance, event) {
-      this.$message({
-        message: `你点击了${instance.$slots.default[0].text}`,
-        type: 'info'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style/pub.scss';
-</style>

vue.config.js

@@ -3,7 +3,7 @@ const productionGzipExtensions = ['js', 'css']
 const VueFilenameInjector = require('@d2-projects/vue-filename-injector')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const forElementUI = require('webpack-theme-color-replacer/forElementUI')
-const dependencies = require('./dependencies')
+const cdnDependencies = require('./dependencies-cdn')
 
 // 拼接路径
 const resolve = dir => require('path').join(__dirname, dir)
@@ -16,12 +16,12 @@ process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
 let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
 
 let externals = {}
-dependencies.forEach(package => { externals[package.name] = package.library })
+cdnDependencies.forEach(package => { externals[package.name] = package.library })
 
 // 引入文件的 cdn 链接
 const cdn = {
-  css: dependencies.map(e => e.css).filter(e => e),
+  css: cdnDependencies.map(e => e.css).filter(e => e),
-  js: dependencies.map(e => e.js).filter(e => e)
+  js: cdnDependencies.map(e => e.js).filter(e => e)
 }
 
 module.exports = {