@imengyu/vue3-context-menu 1.0.5 → 1.0.9

package/LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.CN.md

@@ -1,7 +1,7 @@
 
 vue3-context-menu
 ---
-一个使用 Vue3 制作的右键菜单组件
+一个使用 Vue3 制作的简洁美观简单的右键菜单组件
 
 ![截图](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/first.png)
 
@@ -21,6 +21,7 @@ npm install -save @imengyu/vue3-context-menu
 
 导入组件：
 ```js
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
 
 createApp(App)
@@ -106,6 +107,20 @@ methods: {
   },
 }
 ```
+### 菜单图标
+
+菜单组件不提供任何图标，如果您想添加图标，推荐使用 [iconfont](http://iconfont.cn) 图标库，导入后填写 MenuItem 的 icon 属性，即可在菜单项前面显示图标。
+
+*默认使用 `<i>` 元素来显示图标。*
+
+### 自定义样式
+
+如果觉得菜单样式不好看，可以重写css样式，所有的css样式定义都在 `/src/ContextSubMenu.vue` 中。你可以将所有样式复制出来，按需修改，存放在你的文件中。然后在导入的地方覆盖默认样式：
+
+```js
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import '你的样式css文件路径.css'
+```
 
 ### 参数说明
 

package/README.md

@@ -1,142 +1,143 @@
-
-vue3-context-menu
----
-A context menu component for Vue3
-
-![Screenshot](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/first.png)
-
-[中文说明](https://github.com/imengyu/vue3-context-menu/blob/main/README.CN.md)
-
----
-
-[View Demo](https://imengyu.top/pages/vue3-context-menu-demo/)
-
----
-
-### Install
-
-```
-npm install -save @imengyu/vue3-context-menu
-```
-
-### Useage
-
-Import vue3-context-menu in main.js:
-```js
-import ContextMenu from '@imengyu/vue3-context-menu'
-
-createApp(App)
-  .use(ContextMenu)     
-```
-
-Add events to the elements that you want show contextmenu: 
-```html
-<div class="box" @contextmenu="onContextMenu($event)">
-  Right click to show contextmenu.
-</div>
-```
-
-Then show your menu:
-```js
-onContextMenu(e : MouseEvent) {
-  //prevent the browser's default menu
-  e.preventDefault();
-  //shou our menu
-  this.$contextmenu({
-    x: e.x,
-    y: e.y,
-    items: [
-      { 
-        label: "A menu item", 
-        onClick: () => {
-          alert("You click a menu item");
-        }
-      },
-      { 
-        label: "A submenu", 
-        children: [
-          { label: "Item1" },
-          { label: "Item2" },
-          { label: "Item3" },
-        ]
-      },
-    ]
-  });
-}
-```
-
-Similarly, you can use component to display the menu:
-
-```html
-<context-menu v-model:show="show" :options="options" />
-```
-
-```js
-data() {
-  return {
-    show: false,
-    options: {
-      items:[
-        {
-          label: "Copy",
-          onClick: () => {
-            document.execCommand('copy');
-          }
-        },
-        { label: "Paste", disabled: true },
-        {
-          label: "Print",
-          icon: 'icon-print',
-          onClick: () => {
-            document.execCommand('print');
-          }
-        },
-      ],
-      iconFontClass: 'iconfont',
-      customClass: "class-a",
-      minWidth: 230,
-      x: 0,
-      y: 0
-    }
-  }
-},
-methods: {
-  onButtonClick(e : MouseEvent) {
-    //Show menu
-    this.show = true;
-    this.options.x = e.x;
-    this.options.y = e.y;
-  },
-}
-```
-
-### Parameter description
-
-#### MenuOptions
-
-| Attribute | description | type | optional value | default value|
-| :----: | :----: | :----: | :----: | :----: |
-| items | The items for this menu. | `MenuItem[]` | — | — |
-| x | Menu display x position. | `number` | — | `0` |
-| y | Menu display y position. | `number` | — | `0` |
-| xOffset | X-coordinate offset of submenu and parent menu. | `number` | — | `0` |
-| yOffset | Y-coordinate offset of submenu and parent menu. | `number` | — | `0` |
-| iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
-| zIndex | The z-index of this menu. | `number` | — | `2` |
-| customClass | Custom menu class. | `string` | — | — |
-| minWidth | Minimum width of main menu (in pixels) | `number` | — | `100` |
-| maxWidth | Maximum width of main menu (in pixels) | `number` | — | `600` |
-
-#### MenuItem
-
-| Attribute | description | type | optional value | default value|
-| :----: | :----: | :----: | :----: | :----: |
-| label | The label of menu. | `string` | — | — |
-| icon | The icon for menu item. | `string` | — | — |
-| disabled | Disable menu item? | `boolean` | — | `false` |
-| divided | Is this menu item separated from the menu item below? | `boolean` | — | `false` |
-| customClass | Custom submenu class. | `string` | — | — |
-| minWidth | Submenu minimum width (in pixels). | `number` | — | `100` |
-| maxWidth | Submenu maximum width (in pixels). | `number` | — | `600` |
-| onClick | Menu item click event handler. | `Function()` | — | — |
-| children | Submenu items. | `MenuItem[]` | — | — |
+
+vue3-context-menu
+---
+A context menu component for Vue3
+
+![Screenshot](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/first.png)
+
+[中文说明](https://github.com/imengyu/vue3-context-menu/blob/main/README.CN.md)
+
+---
+
+[View Demo](https://imengyu.top/pages/vue3-context-menu-demo/)
+
+---
+
+### Install
+
+```
+npm install -save @imengyu/vue3-context-menu
+```
+
+### Useage
+
+Import vue3-context-menu in main.js:
+```js
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+
+createApp(App)
+  .use(ContextMenu)     
+```
+
+Add events to the elements that you want show contextmenu: 
+```html
+<div class="box" @contextmenu="onContextMenu($event)">
+  Right click to show contextmenu.
+</div>
+```
+
+Then show your menu:
+```js
+onContextMenu(e : MouseEvent) {
+  //prevent the browser's default menu
+  e.preventDefault();
+  //shou our menu
+  this.$contextmenu({
+    x: e.x,
+    y: e.y,
+    items: [
+      { 
+        label: "A menu item", 
+        onClick: () => {
+          alert("You click a menu item");
+        }
+      },
+      { 
+        label: "A submenu", 
+        children: [
+          { label: "Item1" },
+          { label: "Item2" },
+          { label: "Item3" },
+        ]
+      },
+    ]
+  });
+}
+```
+
+Similarly, you can use component to display the menu:
+
+```html
+<context-menu v-model:show="show" :options="options" />
+```
+
+```js
+data() {
+  return {
+    show: false,
+    options: {
+      items:[
+        {
+          label: "Copy",
+          onClick: () => {
+            document.execCommand('copy');
+          }
+        },
+        { label: "Paste", disabled: true },
+        {
+          label: "Print",
+          icon: 'icon-print',
+          onClick: () => {
+            document.execCommand('print');
+          }
+        },
+      ],
+      iconFontClass: 'iconfont',
+      customClass: "class-a",
+      minWidth: 230,
+      x: 0,
+      y: 0
+    }
+  }
+},
+methods: {
+  onButtonClick(e : MouseEvent) {
+    //Show menu
+    this.show = true;
+    this.options.x = e.x;
+    this.options.y = e.y;
+  },
+}
+```
+
+### Parameter description
+
+#### MenuOptions
+
+| Attribute | description | type | optional value | default value|
+| :----: | :----: | :----: | :----: | :----: |
+| items | The items for this menu. | `MenuItem[]` | — | — |
+| x | Menu display x position. | `number` | — | `0` |
+| y | Menu display y position. | `number` | — | `0` |
+| xOffset | X-coordinate offset of submenu and parent menu. | `number` | — | `0` |
+| yOffset | Y-coordinate offset of submenu and parent menu. | `number` | — | `0` |
+| iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
+| zIndex | The z-index of this menu. | `number` | — | `2` |
+| customClass | Custom menu class. | `string` | — | — |
+| minWidth | Minimum width of main menu (in pixels) | `number` | — | `100` |
+| maxWidth | Maximum width of main menu (in pixels) | `number` | — | `600` |
+
+#### MenuItem
+
+| Attribute | description | type | optional value | default value|
+| :----: | :----: | :----: | :----: | :----: |
+| label | The label of menu. | `string` | — | — |
+| icon | The icon for menu item. | `string` | — | — |
+| disabled | Disable menu item? | `boolean` | — | `false` |
+| divided | Is this menu item separated from the menu item below? | `boolean` | — | `false` |
+| customClass | Custom submenu class. | `string` | — | — |
+| minWidth | Submenu minimum width (in pixels). | `number` | — | `100` |
+| maxWidth | Submenu maximum width (in pixels). | `number` | — | `600` |
+| onClick | Menu item click event handler. | `Function()` | — | — |
+| children | Submenu items. | `MenuItem[]` | — | — |