mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: add contextmenu components
This commit is contained in:
xiaoxian521
parent
c10e38cdf2
commit
7ed66b321d
18
package-lock.json
generated
18
package-lock.json
generated
@ -26,6 +26,7 @@
|
||||
"path": "^0.12.7",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"v-contextmenu": "^3.0.0",
|
||||
"vue": "^3.0.11",
|
||||
"vue-i18n": "^9.1.6",
|
||||
"vue-json-pretty": "^2.0.2",
|
||||
@ -2549,6 +2550,17 @@
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/v-contextmenu": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
|
||||
"integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",
|
||||
@ -4946,6 +4958,12 @@
|
||||
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
|
||||
"dev": true
|
||||
},
|
||||
"v-contextmenu": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
|
||||
"integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
|
||||
"requires": {}
|
||||
},
|
||||
"vite": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"path": "^0.12.7",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"v-contextmenu": "^3.0.0",
|
||||
"vue": "^3.0.11",
|
||||
"vue-i18n": "^9.1.6",
|
||||
"vue-json-pretty": "^2.0.2",
|
||||
|
||||
@ -13,6 +13,8 @@ import "./style/index.scss";
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
|
||||
import "v-contextmenu/dist/themes/default.css";
|
||||
|
||||
import { setConfig, getConfig } from "./config";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
@ -31,6 +31,7 @@ export const menusConfig = {
|
||||
hsselector: "选择器组件",
|
||||
hsflowChart: "流程图",
|
||||
hsseamless: "无缝滚动",
|
||||
hscontextmenu: "右键菜单",
|
||||
},
|
||||
},
|
||||
en: {
|
||||
@ -54,6 +55,7 @@ export const menusConfig = {
|
||||
hsselector: "Selector Components",
|
||||
hsflowChart: "Flow Chart",
|
||||
hsseamless: "Seamless Scroll",
|
||||
hscontextmenu: "Context Menu",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -145,15 +145,18 @@ const routes: Array<RouteRecordRaw> = [
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/components/flowChart',
|
||||
// component: () => import(/* webpackChunkName: "components" */ '../views/components/flow-chart/index.vue'),
|
||||
// meta: {
|
||||
// title: 'message.hsflowChart',
|
||||
// showLink: false,
|
||||
// savedPosition: true
|
||||
// }
|
||||
// }
|
||||
{
|
||||
path: "/components/contextmenu",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "components" */ "../views/components/contextmenu/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "message.hscontextmenu",
|
||||
showLink: false,
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
meta: {
|
||||
icon: "el-icon-menu",
|
||||
@ -355,7 +358,7 @@ router.beforeEach((to, _from, next) => {
|
||||
NProgress.start();
|
||||
const { t } = i18n.global;
|
||||
// @ts-ignore
|
||||
document.title = t(to.meta.title); // 动态title
|
||||
to.meta.title ? (document.title = t(to.meta.title)) : ""; // 动态title
|
||||
whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
|
||||
? next()
|
||||
: next("/login"); // 全部重定向到登录页
|
||||
|
||||
75
src/views/components/contextmenu/basic.vue
Normal file
75
src/views/components/contextmenu/basic.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>基本使用</h1>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item>GitHub</v-contextmenu-item>
|
||||
<v-contextmenu-item>GitLab</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-submenu title="蔬菜菜">
|
||||
<v-contextmenu-item>土豆</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-submenu title="青菜">
|
||||
<v-contextmenu-item>小油菜</v-contextmenu-item>
|
||||
<v-contextmenu-item>空心菜</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item>黄瓜</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-item>哈密瓜</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ExampleSimple",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 3px dashed rgba(90, 167, 164, 0.9);
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
34
src/views/components/contextmenu/index.vue
Normal file
34
src/views/components/contextmenu/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div style="margin:10px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
<basic />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 按钮组 -->
|
||||
<menuGroup />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 动态菜单 -->
|
||||
<menuDynamic />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import basic from "./basic.vue";
|
||||
import menuGroup from "./menuGroup.vue";
|
||||
import menuDynamic from "./menuDynamic.vue";
|
||||
export default {
|
||||
components: {
|
||||
basic,
|
||||
menuGroup,
|
||||
menuDynamic
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
94
src/views/components/contextmenu/menuDynamic.vue
Normal file
94
src/views/components/contextmenu/menuDynamic.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>动态菜单</h1>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-group title="操作">
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">添加菜单</v-contextmenu-item>
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">添加菜单组</v-contextmenu-item>
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.push('submenu')">添加子菜单</v-contextmenu-item>
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()">删除</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
|
||||
<template v-for="(item, index) of extra">
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-group v-if="item === 'group'" :title="`菜单组 ${index + 1}`">
|
||||
<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-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`">
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
|
||||
</template>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ExampleDynamic",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
extra: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
addItem(type = "item") {
|
||||
this.extra.push(type);
|
||||
},
|
||||
removeItem() {
|
||||
this.extra.pop();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin-bottom: 30px;
|
||||
border: 3px dashed rgba(90, 167, 164, 0.9);
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
72
src/views/components/contextmenu/menuGroup.vue
Normal file
72
src/views/components/contextmenu/menuGroup.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>按钮组</h1>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item>菜单</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-group>
|
||||
<v-contextmenu-item>Github</v-contextmenu-item>
|
||||
<v-contextmenu-item>Codepen</v-contextmenu-item>
|
||||
<v-contextmenu-item disabled>Alipay</v-contextmenu-item>
|
||||
<v-contextmenu-item>Wechat</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-group title="按钮组">
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item disabled>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
const ExampleSFC = defineComponent({
|
||||
name: "ExampleSFC",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
}
|
||||
});
|
||||
|
||||
export default ExampleSFC;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 3px dashed rgba(90, 167, 164, 0.9);
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="margin:10px">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
<CountTo
|
||||
prefix="$"
|
||||
@ -13,7 +13,7 @@
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
<CountTo
|
||||
prefix="$"
|
||||
@ -44,5 +44,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-card) {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user