1 | # v-contextmenu
|
2 |
|
3 | [![NPM version][badge-npm-version]][url-npm]
|
4 | [![Node version][badge-node-version]][url-npm]
|
5 | [![NPM download][badge-npm-download]][url-npm]
|
6 | ![Dependencies][badge-dependencies]
|
7 | ![License][badge-license]
|
8 |
|
9 | [![NPM][image-npm]][url-npm]
|
10 |
|
11 | 适用于 Vue 2.0 的 ContextMenu 组件。
|
12 |
|
13 | **中文 | [English](./README_EN.md)**
|
14 |
|
15 | ## 安装
|
16 |
|
17 | ### CDN 引入
|
18 |
|
19 | 可通过 [unpkg.com/v-contextmenu](https://unpkg.com/v-contextmenu/) 获取最新版本的资源,在页面中引入相应 js 和 css 文件即可。
|
20 |
|
21 | ``` html
|
22 | <!-- 引入 Vue -->
|
23 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
|
24 |
|
25 | <!-- 引入 VContextmenu 组件 -->
|
26 | <script src="https://unpkg.com/v-contextmenu/dist/index.js"></script>
|
27 |
|
28 | <!-- 引入 VContextmenu 组件样式 -->
|
29 | <link rel="stylesheet" href="https://unpkg.com/v-contextmenu/dist/index.css">
|
30 | ```
|
31 |
|
32 | > 建议使用 NPM 安装
|
33 |
|
34 | ### NPM 安装
|
35 |
|
36 | ```bash
|
37 | $ npm i -S v-contextmenu # yarn add v-contextmenu
|
38 | ```
|
39 |
|
40 | ## 概览
|
41 |
|
42 | ![概览](./docs/images/gallery.jpg)
|
43 |
|
44 | [访问在线示例](https://heynext.github.io/v-contextmenu) 或 [查看在线示例 GIF](./docs/images/example.gif)
|
45 |
|
46 | ## 使用
|
47 |
|
48 | 一个简单的例子
|
49 |
|
50 | ```javascript
|
51 | import contentmenu from 'v-contextmenu'
|
52 | import 'v-contextmenu/dist/index.css'
|
53 |
|
54 | Vue.use(contentmenu)
|
55 | ```
|
56 |
|
57 | ```html
|
58 | <template>
|
59 | <v-contextmenu ref="contextmenu">
|
60 | <v-contextmenu-item>菜单1</v-contextmenu-item>
|
61 | <v-contextmenu-item>菜单2</v-contextmenu-item>
|
62 | <v-contextmenu-item>菜单3</v-contextmenu-item>
|
63 | </v-contextmenu>
|
64 |
|
65 | <div v-contextmenu:contextmenu>右键点击此区域</div>
|
66 | </template>
|
67 | ```
|
68 |
|
69 | 详细使用方法见 [文档](./docs/usage.md) & [例子](./examples)
|
70 |
|
71 | > 如果你需要单独引入组件使用,请查看[单独引用](./examples/Stoneless.vue)
|
72 |
|
73 | ## 主题
|
74 |
|
75 | 提供三种主题,使用方法见 [VContextmenu](./docs/usage.md#vcontextmenu)
|
76 |
|
77 | **默认**
|
78 |
|
79 | ![default](./docs/images/default.jpg)
|
80 |
|
81 | **亮色**
|
82 |
|
83 | ![bright](./docs/images/bright.jpg)
|
84 |
|
85 | **暗色**
|
86 |
|
87 | ![dark](./docs/images/dark.jpg)
|
88 |
|
89 | ## 开发
|
90 |
|
91 | ```bash
|
92 | $ npm install
|
93 | $ npm run dev
|
94 | ```
|
95 |
|
96 | ## 构建
|
97 |
|
98 | ```bash
|
99 | $ npm run build:package # 构建 npm 包
|
100 | $ npm run build:example # 构建示例站点
|
101 | $ npm run build # build:package & build:example
|
102 | ```
|
103 |
|
104 | ## 更新日志
|
105 |
|
106 | 详见 [releases][url-releases]
|
107 |
|
108 |
|
109 | [badge-npm-version]: https://img.shields.io/npm/v/v-contextmenu.svg
|
110 | [badge-node-version]: https://img.shields.io/node/v/v-contextmenu.svg
|
111 | [badge-npm-download]: https://img.shields.io/npm/dt/v-contextmenu.svg
|
112 | [badge-license]: https://img.shields.io/github/license/heynext/v-contextmenu.svg
|
113 | [badge-dependencies]: https://img.shields.io/david/dev/heynext/v-contextmenu.svg
|
114 |
|
115 | [url-npm]: https://npmjs.org/package/v-contextmenu
|
116 | [url-dependencies]: https://david-dm.org/vkbansal/v-contextmenu
|
117 | [url-releases]: https://github.com/heynext/v-contextmenu/releases
|
118 |
|
119 | [image-npm]: https://nodei.co/npm/v-contextmenu.png
|