Skip to content

Commit 44c9419

Browse files
committed
add readme-zh
1 parent f128976 commit 44c9419

File tree

2 files changed

+94
-5
lines changed

2 files changed

+94
-5
lines changed

README-ZH.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# vuejs-modal ![travis-ci](https://travis-ci.org/shaodahong/vuejs-modal.svg?branch=master)
2+
3+
一个简洁,高度可定制的vue modal插件。
4+
5+
## 介绍
6+
7+
一个文件就是一个modal,并且注册到vue全局,所以我们可以通过`this`来使用它,它是一个`promise`,所以我们可以获取到它的状态。
8+
9+
## 安装
10+
11+
```bash
12+
$ npm i vuejs-modal -S
13+
```
14+
15+
## 用法
16+
17+
```javascript
18+
import Modal from 'vuejs-modal'
19+
20+
// 如果你想使用默认的模板:
21+
import confirm from 'vuejs-modal/lib/confirm.vue'
22+
23+
Vue.use(Modal, {
24+
modals: {
25+
confirm //默认的模板
26+
} //你的modals,它是个对象
27+
})
28+
```
29+
30+
在组件中使用:
31+
32+
```js
33+
<template>
34+
//html
35+
</template>
36+
37+
<script>
38+
export default {
39+
methods: {
40+
show: function () {
41+
this.$modal.confirm().then( res => {
42+
// 我点击了确定
43+
}).catch( rej => {
44+
// 我点击了取消
45+
})
46+
}
47+
}
48+
}
49+
</script>
50+
```
51+
52+
## 参数
53+
54+
```js
55+
Vue.use(Modal, {
56+
// 在组件中使用this调用的名字,默认是$modal
57+
name: '$modal',
58+
59+
// modal div的id名,默认是modal
60+
id: 'modal',
61+
62+
// 你的modals,是一个对象,默认是null
63+
// 这个对象的key就是你要调用的modal名字,value就是一个组件
64+
modals: {
65+
confirm: confirm.component
66+
},
67+
68+
// modal的默认的样式,z-index是递增的
69+
style: {
70+
position: 'fixed',
71+
top: 0,
72+
left: 0,
73+
bottom: 0,
74+
right: 0,
75+
zIndex: 1000
76+
}
77+
})
78+
```
79+
80+
## 事件
81+
```js
82+
// 如果你点击确定按钮,会使promise resolve, params可以在then中获取到
83+
this.$emit('$ok', this.$el, params)
84+
85+
// 如果你点击取消按钮,会使promise reject,params可以在catch中获取到
86+
this.$emit('$cancel', this.$el, params)
87+
```

README.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
A simple、highly customizable vue modal plugin.
44

5+
[中文]('README-ZH.md')
6+
57
## Introduction
68

79
A file corresponds to a modal, and registered to vue prototype, so I can use it through `this`, it gives me a state of a `promise`, so I can get this modal state.
@@ -65,7 +67,7 @@ Vue.use(Modal, {
6567
confirm: confirm.component
6668
},
6769

68-
// modal style, the default hava a z-index
70+
// modal default style, the default hava a z-index, it will be increment
6971
style: {
7072
position: 'fixed',
7173
top: 0,
@@ -79,9 +81,9 @@ Vue.use(Modal, {
7981

8082
## Event
8183
```js
82-
// If you can click ok button:
83-
this.$emit('$ok', this.$el)
84+
// If you can click ok button, it can be resolve promise, and you can get params in then:
85+
this.$emit('$ok', this.$el, params)
8486

85-
// If you can click cancel button:
86-
this.$emit('$cancel', this.$el)
87+
// If you can click cancel button, it can be reject promise, and you can get params in catch:
88+
this.$emit('$cancel', this.$el, params)
8789
```

0 commit comments

Comments
 (0)