mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
feat: add contextmenu components
This commit is contained in:
xiaoxian521
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>
|
||||
|
||||
Reference in New Issue
Block a user