element/packages/dialog/README.md

75 lines
2.0 KiB
Markdown
Raw Normal View History

2016-12-15 07:15:46 +00:00
# element-dialog
> A element-dialog component for Vue.js.
2016-07-27 06:15:02 +00:00
## Demo
2016-12-15 07:15:46 +00:00
http://element-component.github.io/element-dialog
2016-07-27 06:15:02 +00:00
## Installation
```shell
2016-12-15 07:15:46 +00:00
npm i element-dialog -D
2016-07-27 06:15:02 +00:00
```
## Usage
```javascript
import Vue from 'vue'
2016-12-15 07:15:46 +00:00
import ElDialog from 'element-dialog'
2016-07-27 06:15:02 +00:00
import 'element-theme-default'
Vue.use(ElDialog)
```
or
```javascript
import Vue from 'vue'
2016-12-15 07:15:46 +00:00
import ElDialog from 'element-dialog'
2016-07-27 06:15:02 +00:00
Vue.component('el-dialog', ElDialog)
```
2016-12-15 07:15:46 +00:00
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | Dialog 的标题 | string | — | — |
| size | Dialog 的大小 | string | tiny/small/large/full | small |
| top | Dialog CSS 中的 top 值(仅在 size 不为 full 时有效) | string | — | 15% |
| modal | 是否需要遮罩层 | boolean | — | true |
| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
| custom-class | Dialog 的自定义类名 | string | — | — |
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
| show-close | 是否显示关闭按钮 | boolean | — | true |
2016-07-27 06:15:02 +00:00
2016-12-15 07:15:46 +00:00
### Slot
| name | 说明 |
|------|--------|
| — | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
2016-07-27 06:15:02 +00:00
2016-12-15 07:15:46 +00:00
### 方法
每个 `el-dialog` 实例都暴露了如下方法,用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例:
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | Dialog 关闭的回调 | — |
| open | Dialog 打开的回调 | — |
2016-07-27 06:15:02 +00:00
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)