Skip to content

Commit 816ebcf

Browse files
imengyuimengyu
committed
Update docs: use vitepress-plugin-sandpack rend demo test
1 parent 135b936 commit 816ebcf

File tree

8 files changed

+900
-404
lines changed

8 files changed

+900
-404
lines changed

‎.gitignore

+2-4
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,5 @@ pnpm-debug.log*
2525
*.sln
2626
*.sw?
2727

28-
/docs/zh/.vitepress/cache/
29-
/docs/zh/.vitepress/dist/
30-
/docs/en/.vitepress/cache/
31-
/docs/en/.vitepress/dist/
28+
/docs/.vitepress/cache/
29+
/docs/.vitepress/dist/

‎docs/en/guide/install.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default defineComponent({
103103

104104
## Getting Started
105105

106-
[Getting Started](./useage.md) 了。
106+
[Getting Started](./useage.md)
107107

108108
## Other questions
109109

‎docs/en/guide/useage.md

+79-40
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,28 @@ There are two ways to display menus:
2020

2121
The first is the function mode. You can use `this.$contextmenu` or `showContextMenu` global function displays a menu with menu data:
2222

23-
```js
23+
::: my-sandbox {template=vue3-ts}
24+
25+
```ts /src/main.ts
26+
import { createApp } from 'vue'
27+
import App from './App.vue'
2428
import ContextMenu from '@imengyu/vue3-context-menu'
29+
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
2530

26-
onContextMenu(e : MouseEvent) {
31+
createApp(App)
32+
.use(ContextMenu)
33+
.mount('#app')
34+
```
35+
36+
```vue /src/App.vue [active]
37+
<script setup lang="ts">
38+
import ContextMenu from '@imengyu/vue3-context-menu'
39+
40+
function onContextMenu(e : MouseEvent) {
2741
//prevent the browser's default menu
2842
e.preventDefault();
2943
//show your menu
30-
this.$contextmenu({
44+
ContextMenu.showContextMenu({
3145
x: e.x,
3246
y: e.y,
3347
items: [
@@ -47,55 +61,80 @@ onContextMenu(e : MouseEvent) {
4761
},
4862
]
4963
});
50-
51-
//Same as this.$contextmenu
52-
ContextMenu.showContextMenu({ ... });
5364
}
65+
</script>
66+
67+
<template>
68+
<button @contextmenu="onContextMenu">Right click me to show context menu!</button>
69+
</template>
5470
```
5571

72+
:::
73+
5674
> Note: `this.$contextmenu` can only be used in templates or optional api.
5775
5876
The second is the component mode. You can use the component and template to display the menu:
5977

60-
```html
61-
<context-menu
62-
v-model:show="show"
63-
:options="optionsComponent"
64-
>
65-
<context-menu-item label="Simple item" @click="onMenuClick(1)" />
66-
<context-menu-sperator /><!--use this to add sperator-->
67-
<context-menu-group label="Menu with child">
68-
<context-menu-item label="Item1" @click="onMenuClick(2)" />
69-
<context-menu-item label="Item2" @click="onMenuClick(3)" />
70-
<context-menu-group label="Child with v-for 50">
71-
<context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="onLoopMenuClick(index)" />
72-
</context-menu-group>
73-
</context-menu-group>
74-
</context-menu>
78+
::: my-sandbox {template=vue3-ts}
79+
80+
```ts /src/main.ts
81+
import { createApp } from 'vue'
82+
import App from './App.vue'
83+
import ContextMenu from '@imengyu/vue3-context-menu'
84+
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
85+
86+
createApp(App)
87+
.use(ContextMenu)
88+
.mount('#app')
7589
```
7690

77-
```js
78-
data() {
79-
return {
80-
show: false,
81-
optionsComponent: {
82-
zIndex: 3,
83-
minWidth: 230,
84-
x: 500,
85-
y: 200
86-
},
87-
}
88-
},
89-
methods: {
90-
onButtonClick(e : MouseEvent) {
91-
//Show component mode menu
92-
this.show = true;
93-
this.options.x = e.x;
94-
this.options.y = e.y;
95-
},
91+
```vue /src/App.vue [active]
92+
<template>
93+
<button @contextmenu="onContextMenu">Right click me to show context menu!</button>
94+
<context-menu
95+
v-model:show="show"
96+
:options="options"
97+
>
98+
<context-menu-item label="Simple item" @click="onMenuClick(0)" />
99+
<context-menu-sperator /><!--use this to add sperator-->
100+
<context-menu-group label="Menu with child">
101+
<context-menu-item label="Item1" @click="onMenuClick(1)" />
102+
<context-menu-item label="Item2" @click="onMenuClick(2)" />
103+
<context-menu-group label="Child with v-for 50">
104+
<context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="onMenuClick(index + 3)" />
105+
</context-menu-group>
106+
</context-menu-group>
107+
</context-menu>
108+
</template>
109+
110+
<script setup lang="ts">
111+
import { ref } from 'vue';
112+
import { MenuOptions } from '@imengyu/vue3-context-menu'
113+
114+
const show = ref(false);
115+
const options = ref<MenuOptions>({
116+
zIndex: 3,
117+
minWidth: 230,
118+
x: 500,
119+
y: 200
120+
});
121+
122+
function onMenuClick(index : number) {
123+
alert('You clicked menu item ' + index)
96124
}
125+
function onContextMenu(e : MouseEvent) {
126+
e.preventDefault();
127+
//Show component mode menu
128+
show.value = true;
129+
options.value.x = e.x;
130+
options.value.y = e.y;
131+
}
132+
133+
</script>
97134
```
98135

136+
:::
137+
99138
## Dynamic change menu
100139

101140
You only need to declare the menu data as responsive data, so that you can dynamically modify the menu:

‎docs/en/index.vue

+1-119
Original file line numberDiff line numberDiff line change
@@ -26,123 +26,5 @@ function goView() {
2626
</script>
2727

2828
<style lang="scss">
29-
30-
$primary-color: #50af21;
31-
$text-color: #000;
32-
$second-text-color: #333;
33-
$inverse-second-text-color: #b1b1b1;
34-
$inverse-text-color: #fff;
35-
36-
html[class="dark"] {
37-
.hidden-dark {
38-
visibility: hidden;
39-
}
40-
.hidden-light {
41-
visibility: visible;
42-
}
43-
44-
.big-title {
45-
h1 {
46-
color: $primary-color;
47-
}
48-
p {
49-
color: $inverse-second-text-color;
50-
51-
&.big {
52-
color: $inverse-text-color;
53-
}
54-
}
55-
}
56-
.big-start {
57-
button {
58-
border: 1px solid #535353;
59-
color: $inverse-second-text-color;
60-
background-color: #3a3a3a;
61-
}
62-
}
63-
}
64-
65-
.hidden-light {
66-
visibility: hidden;
67-
}
68-
69-
.big-home-area {
70-
max-width: 1152px;
71-
margin: 0 auto;
72-
}
73-
.big-title {
74-
margin-top: 100px;
75-
76-
h1 {
77-
color:$primary-color;
78-
line-height: 64px;
79-
font-size: 56px;
80-
font-weight: bold;
81-
}
82-
p {
83-
font-size: 26px;
84-
line-height: 34px;
85-
color: $second-text-color;
86-
87-
&.big {
88-
font-size: 36px;
89-
line-height: 55px;
90-
color: $text-color;
91-
font-weight: bold;
92-
}
93-
94-
}
95-
}
96-
.big-demo {
97-
img {
98-
position: absolute;
99-
right: 300px;
100-
top: -60px;
101-
z-index: -1;
102-
}
103-
}
104-
105-
@media screen and (max-width: 1600px) {
106-
.big-demo img {
107-
right: 200px;
108-
}
109-
}
110-
@media screen and (max-width: 1450px) {
111-
.big-demo img {
112-
right: 100px;
113-
}
114-
}
115-
@media screen and (max-width: 1200px) {
116-
.big-demo img {
117-
position: relative;
118-
margin-top: 30px;
119-
right: 0;
120-
top: 0;
121-
}
122-
.big-home-area {
123-
padding: 0 50px;
124-
}
125-
}
126-
127-
.big-start {
128-
padding: 20px 0 40px 0;
129-
130-
button {
131-
font-size: 16px;
132-
padding: 10px 20px;
133-
border-radius: 30px;
134-
outline: none;
135-
appearance: none;
136-
border: 1px solid #c2c2c2;
137-
color: $second-text-color;
138-
background-color: #f0f0f0;
139-
margin-right: 10px;
140-
141-
&.primary {
142-
border: 1px solid $primary-color;
143-
color: $inverse-text-color;
144-
background-color: $primary-color;
145-
}
146-
}
147-
}
29+
@import '../index.scss';
14830
</style>

‎docs/index.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: vue3-context-menu - 一个使用 Vue3 制作的简洁美观简单的右键菜单组件
3+
layout: home
4+
---
5+
6+
<Index />
7+
8+
<script setup>
9+
import Index from './index.vue'
10+
</script>

0 commit comments

Comments
 (0)