Skip to content

Commit 9af33f9

Browse files
Array-HuangArray-Huang
committed
更新README
1 parent b2a374e commit 9af33f9

File tree

3 files changed

+166
-31
lines changed

3 files changed

+166
-31
lines changed

‎README.md

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,38 +18,40 @@
1818

1919
> Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
2020
21-
### 🏠 [Homepage](https://github.com/Array-Huang/vue-directive-window)
21+
- [Github](https://github.com/Array-Huang/vue-directive-window)
22+
- [中文 README](https://github.com/ElemeFE/element/blob/dev/README.zh-CN.md)
23+
- [中文 Document](https://array-huang.github.io/vue-directive-window/zh-CN/)
2224

23-
## 快速上手
25+
## Quick Start
2426

25-
> 注意 请确保你的 Node.js 版本 >= 8。
27+
> Please make sure your Node.js version >= 8.
2628
27-
## 引入vue-directive-window
28-
`vue-directive-window`支持静态文件及npm两种方式引入。
29+
## Installation
30+
`vue-directive-window` provides two ways of installation, from CDN and from npm.
2931

30-
### 静态文件方式引入
32+
### CDN
3133
```html
3234
<script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
3335
```
3436

35-
### npm方式引入
37+
### npm
3638
```bash
3739
npm install vue-directive-window
3840
```
3941

40-
## 开始使用
41-
`vue-directive-window`支持Vue自定义指令及一般js类两种方式来使用。
42+
## Hello World
43+
`vue-directive-window` provides two ways to use, Vue Custom Directive, and general javascript class library.
4244

43-
### Vue自定义指令
45+
### Vue Custom Directive
4446
```vue
4547
<template>
4648
<div v-window="windowParams">
47-
<!-- 容器内容 -->
49+
<!-- container content -->
4850
</div>
4951
</template>
5052
<script>
5153
import VueDirectiveWindow from 'vue-directive-window';
52-
Vue.use(VueDirectiveWindow); // 如果是以静态文件方式引入的话，则不需要 import，直接使用Vue.use(window['vue-directive-window'])
54+
Vue.use(VueDirectiveWindow); // When you take the CDN way, you don't need to import anything; you may use `Vue.use(window['vue-directive-window'])` instead.
5355
export default {
5456
data() {
5557
return {
@@ -63,15 +65,15 @@ export default {
6365
</script>
6466
```
6567

66-
### 一般js类
68+
### Javascript Class Library
6769
```html
6870
<div class="demo-window" v-window="windowParams">
69-
<!-- 容器内容 -->
71+
<!-- container content -->
7072
</div>
7173
```
7274

7375
```javascript
74-
import { enhanceWindow } from 'vue-directive-window'; // 如果是以静态文件方式引入的话,则是const enhanceWindow = window['vue-directive-window'].enhanceWindow;
76+
import { enhanceWindow } from 'vue-directive-window'; // When you take the CDN way, you may use `const enhanceWindow = window['vue-directive-window'].enhanceWindow;` instead.
7577

7678
const windowParams = {
7779
movable: false
@@ -81,29 +83,57 @@ const windowParams = {
8183
enhanceWindow(document.querySelector('.demo-window'), windowParams);
8284
```
8385

84-
## 参数
86+
### Vue Custom Directive
87+
```vue
88+
<template>
89+
<div v-window="windowParams">
90+
<!-- container content -->
91+
</div>
92+
</template>
93+
<script>
94+
import VueDirectiveWindow from 'vue-directive-window';
95+
Vue.use(VueDirectiveWindow); // When you take the CDN way, you don't need to import anything; you may use `Vue.use(window['vue-directive-window'])` instead.
96+
export default {
97+
data() {
98+
return {
99+
windowParams: {
100+
movable: false,
101+
resizable: ['left', 'left-top'],
102+
},
103+
};
104+
},
105+
}
106+
</script>
107+
```
85108

86-
参数 | 说明 | 类型 | 可选值 | 默认值
87-
---|---|---|---|---
88-
minWidth | 窗口可被调整至的最小宽度(px) | Number | —— | 100
89-
maxWidth | 窗口可被调整至的最大宽度(px) | Number | —— | ——
90-
minHeight | 窗口可被调整至的最小高度(px) | Number | —— | 100
91-
maxHeight | 窗口可被调整至的最大高度(px) | Number | —— | ——
92-
movable | 是否开启拖拽移动功能 | Boolean | —— | true
93-
resizable | 是否开启调整窗口尺寸的功能。参数为`true`表示八个方向均可调整窗口尺寸；但如果传入的是字符串数组，如`['left', 'left-top']`，则只有参数指定的方向可以调整窗口尺寸；各个方向的标识如“可选值”列里所示。 | Boolean / Array | `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom` | true
94-
customMoveHandler | 自定义的拖拽移动handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。 | String / Element | —— | ——
95-
customMaximizeHandler | 自定义的最大化handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。 | String / Element | —— | ——
96-
maximizeCallback | 窗口最大化的回调函数。回调参数为：当前是否最大化(Boolean) | Function | —— | ——
109+
### Javascript Class Library
110+
```html
111+
<div class="demo-window" v-window="windowParams">
112+
<!-- container content -->
113+
</div>
114+
```
115+
116+
```javascript
117+
import { enhanceWindow } from 'vue-directive-window'; // When you take the CDN way, you may use `const enhanceWindow = window['vue-directive-window'].enhanceWindow;` instead.
118+
119+
const windowParams = {
120+
movable: false
121+
resizable: ['left', 'left-top']
122+
};
123+
124+
enhanceWindow(document.querySelector('.demo-window'), windowParams);
125+
```
126+
127+
## Ready for More?
128+
At this point, you already install `vue-directive-window` and create a Hello World case. If you are interested in `vue-directive-window` and want to know more about it, you may refer to chapter [examples](/examples.md) and [params](/params.md).
97129

98130
## Author
99131

100132
👤 **Array Huang**
101133

102134
- Github: [@Array-Huang](https://github.com/Array-Huang)
103135

104-
## Show your support
105-
106-
Give a ⭐️ if this project helped you!
136+
## Give a ⭐️ if this project helped you!
107137

108138
## 📝 License
109139

‎README.zh-CN.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<h1 align="center">vue-directive-window 👋</h1>
2+
<p>
3+
<a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
4+
<img src="https://img.shields.io/npm/v/vue-directive-window.svg?cacheSeconds=2592000" />
5+
</a>
6+
<a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
7+
<img alt="Maintenance" src="https://img.shields.io/npm/dw/vue-directive-window.svg?cacheSeconds=2592000" />
8+
</a>
9+
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/vue-directive-window.svg?cacheSeconds=2592000" />
10+
<a href="https://array-huang.github.io/vue-directive-window">
11+
<img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
12+
</a>
13+
<a href="https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE">
14+
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
15+
</a>
16+
17+
</p>
18+
19+
> 让你的模态框轻而易举地支持类窗口操作。
20+
21+
- [Github](https://github.com/Array-Huang/vue-directive-window)
22+
- [English README](https://github.com/ElemeFE/element/blob/dev/README.md)
23+
- [English Document](https://array-huang.github.io/vue-directive-window/)
24+
25+
## 快速上手
26+
27+
> 注意 请确保你的 Node.js 版本 >= 8。
28+
29+
## 引入vue-directive-window
30+
`vue-directive-window`支持静态文件及npm两种方式引入。
31+
32+
### 静态文件方式引入
33+
```html
34+
<script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
35+
```
36+
37+
### npm方式引入
38+
```bash
39+
npm install vue-directive-window
40+
```
41+
42+
## 开始使用
43+
`vue-directive-window`支持Vue自定义指令及一般js类两种方式来使用。
44+
45+
### Vue自定义指令
46+
```vue
47+
<template>
48+
<div v-window="windowParams">
49+
<!-- 容器内容 -->
50+
</div>
51+
</template>
52+
<script>
53+
import VueDirectiveWindow from 'vue-directive-window';
54+
Vue.use(VueDirectiveWindow); // 如果是以静态文件方式引入的话，则不需要 import，直接使用Vue.use(window['vue-directive-window'])
55+
export default {
56+
data() {
57+
return {
58+
windowParams: {
59+
movable: false,
60+
resizable: ['left', 'left-top'],
61+
},
62+
};
63+
},
64+
}
65+
</script>
66+
```
67+
68+
### 一般js类
69+
```html
70+
<div class="demo-window" v-window="windowParams">
71+
<!-- 容器内容 -->
72+
</div>
73+
```
74+
75+
```javascript
76+
import { enhanceWindow } from 'vue-directive-window'; // 如果是以静态文件方式引入的话,则是const enhanceWindow = window['vue-directive-window'].enhanceWindow;
77+
78+
const windowParams = {
79+
movable: false
80+
resizable: ['left', 'left-top']
81+
};
82+
83+
enhanceWindow(document.querySelector('.demo-window'), windowParams);
84+
```
85+
86+
## 参数
87+
88+
参数 | 说明 | 类型 | 可选值 | 默认值
89+
---|---|---|---|---
90+
minWidth | 窗口可被调整至的最小宽度(px) | Number | —— | 100
91+
maxWidth | 窗口可被调整至的最大宽度(px) | Number | —— | ——
92+
minHeight | 窗口可被调整至的最小高度(px) | Number | —— | 100
93+
maxHeight | 窗口可被调整至的最大高度(px) | Number | —— | ——
94+
movable | 是否开启拖拽移动功能 | Boolean | —— | true
95+
resizable | 是否开启调整窗口尺寸的功能。参数为`true`表示八个方向均可调整窗口尺寸；但如果传入的是字符串数组，如`['left', 'left-top']`，则只有参数指定的方向可以调整窗口尺寸；各个方向的标识如“可选值”列里所示。 | Boolean / Array | `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom` | true
96+
customMoveHandler | 自定义的拖拽移动handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。 | String / Element | —— | ——
97+
customMaximizeHandler | 自定义的最大化handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。 | String / Element | —— | ——
98+
maximizeCallback | 窗口最大化的回调函数。回调参数为：当前是否最大化(Boolean) | Function | —— | ——
99+
100+
## 喜欢的话，请给个星吧⭐️
101+
102+
## 📝 License
103+
104+
Copyright © 2019 [Array Huang](https://github.com/Array-Huang).<br />
105+
This project is [MIT](https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE) licensed.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-directive-window",
3-
"version": "0.7.0",
3+
"version": "0.7.1",
44
"description": "Vue.js directive that enhance your Modal Window, support drag, resize and maximize.",
55
"author": "Array Huang",
66
"license": "MIT",

0 commit comments

Comments
 (0)