element/packages/dropdown/README.md
2016-12-16 10:57:54 +08:00

69 lines
2.2 KiB
Markdown

# element-dropdown
> A element-dropdown component for Vue.js.
## Demo
http://element-component.github.io/element-dropdown
## Installation
```shell
npm i element-dropdown -D
```
## Usage
```javascript
import Vue from 'vue'
import ElDropdown from 'element-dropdown'
import 'element-theme-default/dist/dropdown.css'
Vue.use(ElDropdown)
```
or
```javascript
import Vue from 'vue'
import { ElDropdown } from 'element-dropdown'
import { ElDropdownMenu } from 'element-dropdown'
import { ElDropdownItem } from 'element-dropdown'
Vue.component('el-dropdown', ElDropdown)
Vue.component('el-dropdown-menu', ElDropdownMenu)
Vue.component('el-dropdown-item', ElDropdownItem)
```
### Dropdown Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 菜单按钮类型,同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
| size | 菜单按钮尺寸,同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
| menu-align | 菜单水平对齐方向 | string | start, end | end |
| trigger | 触发下拉的行为 | string | hover, click | hover |
### Dropdown Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| click | `split-button` 为 true 时,点击左侧按钮的回调 | — |
| command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
### Dropdown Menu Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | 指令 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 显示分割线 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)