github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

component README update and fix

pull/1803/head
baiyaaaaa 2016-12-15 15:15:46 +08:00 committed by 杨奕
parent 47c62e9fe0
commit a5bdd2cabb
79 changed files with 2004 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/docs/zh-CN/slider.md
View File

@ -143,7 +143,7 @@
```
:::
## Attributes
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| min | 最小值 | number | — | 0 |
@ -153,7 +153,7 @@
| show-input | 是否显示输入框 | boolean | — | false |
| show-stops | 是否显示间断点 | boolean | — | false |
## Events
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 值改变时触发 | 改变后的值 |

4
examples/docs/zh-CN/upload.md
View File

@ -156,7 +156,7 @@
```
:::
### Upload Attribute
### Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | — | — |
@ -177,7 +177,7 @@
| thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
| default-file-list | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
### Upload Methods
### Methods
| 方法名 | 说明 | 参数 |
|---------- |-------------- | - |
| clearFiles | 清空已上传的文件列表 | — |

58
packages/alert/README.md Normal file
View File

@ -0,0 +1,58 @@
# element-alert
> A element-alert component for Vue.js.
## Demo
http://element-component.github.io/el-alert
## Installation
```shell
npm i element-alert -D
```
## Usage
```javascript
import Vue from 'vue'
import ElAlert from 'element-alert'
import 'element-theme-default/dist/alert.css'
Vue.use(ElAlert)
```
or
```javascript
import Vue from 'vue'
import ElAlert from 'element-alert'
Vue.component('el-alert', ElAlert)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | 标题，**必选参数** | string | — | — |
| type | 主题 | string | success/warning/info/error | info |
| description | 辅助性文字 | string | — | — |
| render-content | 内容区域的渲染函数，会覆盖 `description` | function(h) | — | — |
| closable | 是否可关闭 | boolean | — | true |
| close-text | 关闭按钮自定义文本 | string | — | — |
| show-icon | 是否显示图标 | boolean | — | false |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | 关闭alert时触发的事件 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

4
packages/alert/package.json
View File

@ -1,6 +1,6 @@
{
"name": "el-alert",
"version": "0.0.0",
"name": "element-alert",
"version": "1.0.0",
"description": "A alert component for Vue.js.",
"keywords": [
"element",

57
packages/autocomplete/README.md Normal file
View File

@ -0,0 +1,57 @@
# el-autocomplete
> A element-autocomplete component for Vue.js.
## Demo
http://element-component.github.io/element-autocomplete
## Installation
```shell
npm i element-autocomplete -D
```
## Usage
```javascript
import Vue from 'vue'
import ElAutocomplete from 'element-autocomplete'
import 'element-theme-default/dist/autocomplete.css'
Vue.use(ElAutocomplete)
```
or
```javascript
import Vue from 'vue'
import ElAutocomplete from 'element-autocomplete'
Vue.component('el-autocomplete', ElAutocomplete)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| value | 必填值输入绑定值 | string | — | — |
| custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — |
| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| select | 点击选中建议项时触发 | 选中建议项 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/autocomplete/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-autocomplete",
"name": "element-autocomplete",
"version": "1.0.0",
"description": "A autocomplete component for Vue.",
"keywords": [

49
packages/badge/README.md Normal file
View File

@ -0,0 +1,49 @@
# element-badge
> A element-badge component for Vue.js.
## Demo
http://element-component.github.io/element-badge
## Installation
```shell
npm i element-badge -D
```
## Usage
```javascript
import Vue from 'vue'
import ElBadge from 'element-badge'
import 'element-theme-default/dist/badge.css'
Vue.use(ElBadge)
```
or
```javascript
import Vue from 'vue'
import ElBadge from 'element-badge'
Vue.component('el-badge', ElBadge)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string, number | — | — |
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
| is-dot | 小圆点 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/badge/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-badge",
"name": "element-badge",
"version": "0.0.0",
"description": "A badge component for Vue.js.",
"keywords": [

55
packages/breadcrumb/README.md Normal file
View File

@ -0,0 +1,55 @@
# element-breadcrumb
> A element-breadcrumb component for Vue.js.
## Demo
http://element-component.github.io/element-breadcrumb
## Installation
```shell
npm i element-breadcrumb -D
```
## Usage
```javascript
import Vue from 'vue'
import ElBreadcrumb from 'element-breadcrumb'
import 'element-theme-default/dist/breadcrumb.css'
Vue.use(ElBreadcrumb)
```
or
```javascript
import Vue from 'vue'
import { ElBreadcrumb } from 'element-breadcrumb'
import { ElBreadcrumbItem } from 'element-breadcrumb'
Vue.component('el-breadcrumb', ElBreadcrumb)
Vue.component('el-breadcrumb-item', ElBreadcrumbItem)
```
### Breadcrumb Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | — | 斜杠'/' |
### Breadcrumb Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
| replace | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

13
packages/breadcrumb/_index.js Normal file
View File

@ -0,0 +1,13 @@
import ElBreadcrumb from './src/breadcrumb';
import ElBreadcrumbItem from './src/breadcrumb-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
Vue.component(ElBreadcrumb.name, ElBreadcrumb);
};
export {
ElBreadcrumb,
ElBreadcrumbItem
};

2
packages/breadcrumb/cooking.conf.js
View File

@ -4,7 +4,7 @@ var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,

2
packages/breadcrumb/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-breadcrumb",
"name": "element-breadcrumb",
"version": "1.0.0",
"description": "A breadcrumb component for Vue.",
"keywords": [

56
packages/button/README.md Normal file
View File

@ -0,0 +1,56 @@
# element-button
> A element-button component for Vue.js.
## Demo
http://element-component.github.io/element-button
## Installation
```shell
npm i element-button -D
```
## Usage
```javascript
import Vue from 'vue'
import ElButton from 'element-button'
import 'element-theme-default/dist/button.css'
Vue.use(ElButton)
```
or
```javascript
import Vue from 'vue'
import { ElButton } from 'element-button'
import { ElButtonGroup } from 'element-button'
Vue.component('el-button', ElButton)
Vue.component('el-button-group', ElButtonGroup)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | large,small,mini | — |
| type | 类型 | string | primary,success,warning,danger,info,text | — |
| plain | 是否朴素按钮 | Boolean | — | false |
| loading | 是否加载中状态 | Boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标，已有的图标库中的图标名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button,submit,reset | button |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/button/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-button",
"name": "element-button",
"version": "1.0.0",
"description": "A button component for Vue.",
"keywords": [

48
packages/card/README.md Normal file
View File

@ -0,0 +1,48 @@
# element-card
> A element-card component for Vue.js.
## Demo
http://element-component.github.io/element-card
## Installation
```shell
npm i element-card -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCard from 'element-card'
import 'element-theme-default/dist/card.css'
Vue.use(ElCard)
```
or
```javascript
import Vue from 'vue'
import ElCard from 'element-card'
Vue.component('el-card', ElCard)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

4
packages/card/package.json
View File

@ -1,6 +1,6 @@
{
"name": "el-card",
"version": "0.0.0",
"name": "element-card",
"version": "1.0.0",
"description": "A card component for Vue.js.",
"keywords": [
"element",

33
packages/checkbox/README.md
View File

@ -1,18 +1,18 @@
# el-checkbox
> A el-checkbox component for Vue.js.
# element-checkbox
> A element-checkbox component for Vue.js.
## Demo
http://element-component.github.io/el-checkbox
http://element-component.github.io/element-checkbox
## Installation
```shell
npm i el-checkbox -D
npm i element-checkbox -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCheckbox from 'el-checkbox'
import ElCheckbox from 'element-checkbox'
import 'element-theme-default/dist/checkbox.css'
Vue.use(ElCheckbox)
@ -22,19 +22,28 @@ or
```javascript
import Vue from 'vue'
import { ElCheckbox } from 'el-checkbox'
import { ElCheckbox } from 'element-checkbox'
import { ElCheckboxGroup } from 'element-checkbox'
Vue.component('el-checkbox', ElCheckbox)
Vue.component('el-checkbox-group', ElCheckboxGroup)
```
## Options
### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| model | 绑定值 | string[] | | |
| value | 真实值 | string | | |
| label | 显示值，不填则显示 value | string | | |
| disabled | 禁用 | boolean | true, false | false |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string | — | — |
| true-label | 选中时的值 | string, number | — | — |
| false-label | 没有选中时的值 | string, number | — | — |
| name | 原生 name 属性 | string | — | — |
| disabled | 按钮禁用 | boolean | — | false |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | event 事件对象 |
## Development
```shell

1
packages/checkbox/index.js
View File

@ -6,4 +6,3 @@ ElCheckbox.install = function(Vue) {
};
export default ElCheckbox;

2
packages/checkbox/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-checkbox",
"name": "element-checkbox",
"version": "1.0.2",
"description": "A checkbox component for Vue.",
"keywords": [

54
packages/col/README.md Normal file
View File

@ -0,0 +1,54 @@
# element-col
> A element-col component for Vue.js.
## Demo
http://element-component.github.io/element-col
## Installation
```shell
npm i element-col -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCol from 'element-col'
import 'element-theme-default/dist/col.css'
Vue.use(ElCol)
```
or
```javascript
import Vue from 'vue'
import ElCol from 'element-col'
Vue.component('el-col', ElCol)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| span | 栅格占据的列数 | number | — | — |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/col/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-col",
"name": "element-col",
"version": "1.0.0",
"description": "A row component for Vue.",
"keywords": [

35
packages/date-picker/README.md
View File

@ -1,9 +1,9 @@
# el-date-picker
# element-datepicker
## Installation
```shell
npm i el-date-picker -S
npm i element-datepicker -S
```
## Usage
@ -11,7 +11,7 @@ npm i el-date-picker -S
A:
```javascript
import Vue from 'vue'
import ElDatePicker from 'el-date-picker'
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
```
@ -19,7 +19,7 @@ Vue.use(ElDatePicker)
B:
```javascript
import Vue from 'vue'
import { DatePicker, TimePicker, TimeSelect } from 'el-date-picker'
import { DatePicker, TimePicker, TimeSelect } from 'element-datepicker'
Vue.component(DatePicker.name, DatePicker);
Vue.component(TimePicker.name, TimePicker);
@ -29,11 +29,36 @@ Vue.component(TimeSelect.name, TimeSelect);
C:
```html
<script src="path/to/vue/dist/vue.js"></script>
<script src="path/to/el-date-picker/index.js"></script>
<script src="path/to/el-datepicker/index.js"></script>
<script>
Vue.use(ElDatePicker);
</script>
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | 完全只读 | boolean | — | false |
| disabled | 禁用 | boolean | - | false |
| editable | 文本框可输入 | boolean | - | true |
| size | 输入框尺寸 | string | large, small, mini | — |
| placeholder | 占位内容 | string | — | — |
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left |
|picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
### Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 标题文本 | string | — | — |
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
## License
MIT

2
packages/date-picker/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-datepicker",
"name": "element-datepicker",
"version": "1.0.0",
"description": "A datepicker component for Vue.",
"keywords": [

45
packages/dialog/README.md
View File

@ -1,18 +1,18 @@
# el-dialog
> A el-dialog component for Vue.js.
# element-dialog
> A element-dialog component for Vue.js.
## Demo
http://element-component.github.io/el-dialog
http://element-component.github.io/element-dialog
## Installation
```shell
npm i el-dialog -D
npm i element-dialog -D
```
## Usage
```javascript
import Vue from 'vue'
import ElDialog from 'el-dialog'
import ElDialog from 'element-dialog'
import 'element-theme-default'
Vue.use(ElDialog)
@ -22,17 +22,42 @@ or
```javascript
import Vue from 'vue'
import { ElDialog } from 'el-dialog'
import ElDialog from 'element-dialog'
Vue.component('el-dialog', ElDialog)
```
### 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 |
## Options
### Slot
| name | 说明 |
|------|--------|
| — | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
| name | description | type | default |
|-------------|-------------|-------------|-------------|
| | | | |
### 方法
每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | Dialog 关闭的回调 | — |
| open | Dialog 打开的回调 | — |
## Development
```shell

2
packages/dialog/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-dialog",
"name": "element-dialog",
"version": "1.0.0",
"description": "A dialog component for Vue.",
"keywords": [

68
packages/dropdown/README.md Normal file
View File

@ -0,0 +1,68 @@
# 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)

16
packages/dropdown/_index.js Normal file
View File

@ -0,0 +1,16 @@
import ElDropdown from './src/dropdown';
import ElDropdownMenu from './src/dropdown-menu.vue';
import ElDropdownItem from './src/dropdown-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElDropdown.name, ElDropdown);
Vue.component(ElDropdownMenu.name, ElDropdownMenu);
Vue.component(ElDropdownItem.name, ElDropdownItem);
};
export {
ElDropdown,
ElDropdownMenu,
ElDropdownItem
};

2
packages/dropdown/cooking.conf.js
View File

@ -4,7 +4,7 @@ var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,

2
packages/dropdown/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-dropdown",
"name": "element-dropdown",
"version": "1.0.0",
"description": "A dropdown component for Vue.",
"keywords": [

73
packages/form/README.md Normal file
View File

@ -0,0 +1,73 @@
# element-form
> A element-form component for Vue.js.
## Demo
http://element-component.github.io/element-form
## Installation
```shell
npm i element-form -D
```
## Usage
```javascript
import Vue from 'vue'
import ElForm from 'element-form'
import 'element-theme-default/dist/form.css'
Vue.use(ElForm)
```
or
```javascript
import Vue from 'vue'
import { ElForm, ElFormItem } from 'element-form'
Vue.component('el-form', ElForm)
Vue.component('el-form-item', ElForm)
```
### Form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | — | — |
| inline | 行内表单模式 | boolean | — | false |
| label-position | 表单域标签的位置 | string | right/left/top | right |
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
### Form Methods
| 方法名 | 说明 |
|---------- |-------------- |
| validate(cb) | 对整个表单进行校验的方法 |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
### Form-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
| rules | 表单验证规则 | object | — | — |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/form/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-form",
"name": "element-form",
"version": "1.0.0",
"description": "A form component for Vue.",
"keywords": [

55
packages/input-number/README.md
View File

@ -1,53 +1,58 @@
# el-input
> A el-input component for Vue.js.
## element-input-number
> A element-input-number component for Vue.js.
# Demo
http://element-component.github.io/el-input
## Demo
http://element-component.github.io/element-input-number
# Installation
## Installation
```shell
npm i el-input -D
npm i element-input-number -D
```
# Usage
## Usage
```javascript
import Vue from 'vue'
import ElInput from 'el-input'
import 'element-theme-default/dist/input.css'
import ElInputNumber from 'element-input-number'
import 'element-theme-default/dist/input-number.css'
Vue.use(ElInput)
Vue.use(ElInputNumber)
```
or
```javascript
import Vue from 'vue'
import { ElInput } from 'el-input'
import ElInputNumber from 'element-input-number'
Vue.component('el-input', ElInput)
Vue.component('el-input-number', ElInputNumber)
```
# Options
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------|-------------- |----------|-------------------------------- |-------- |
| value | 绑定值 | number | — | — |
| min | 设置计数器允许的最小值 | number | — | 0 |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
| name | description | type | default |
|-------------|-------------|-------------|-------------|
| model | 绑定值，需双向绑定 | string|number ||
| placeholder | 输入框占位文本 | string ||
| suggestion | 输入建议 | string[] ||
| disabled | 是否禁用 | boolean | false |
| cache | 是否需要缓存 | boolean | false |
| effect | 输入框效果，允许 text, number, special | string | text |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 绑定值被改变时触发 | 最后变更的值 |
# Development
## Development
```shell
make dev
# test
## test
make test
# build
## build
make build
```
# License
## License
[MIT](https://opensource.org/licenses/MIT)

2
packages/input-number/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-input-number",
"name": "element-input-number",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",

47
packages/input/README.md
View File

@ -1,18 +1,18 @@
# el-input
> A el-input component for Vue.js.
# element-input
> A element-input component for Vue.js.
# Demo
http://element-component.github.io/el-input
http://element-component.github.io/element-input
# Installation
```shell
npm i el-input -D
npm i element-input -D
```
# Usage
```javascript
import Vue from 'vue'
import ElInput from 'el-input'
import ElInput from 'element-input'
import 'element-theme-default/dist/input.css'
Vue.use(ElInput)
@ -22,21 +22,38 @@ or
```javascript
import Vue from 'vue'
import { ElInput } from 'el-input'
import ElInput from 'element-input'
Vue.component('el-input', ElInput)
```
# Options
### Attributes
| name | description | type | default |
|-------------|-------------|-------------|-------------|
| model | 绑定值，需双向绑定 | string|number ||
| placeholder | 输入框占位文本 | string ||
| suggestion | 输入建议 | string[] ||
| disabled | 是否禁用 | boolean | false |
| cache | 是否需要缓存 | boolean | false |
| effect | 输入框效果，允许 text, number, special | string | text |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 类型 | string | text/textarea | text |
| value | 绑定值 | string, number | — | — |
| maxlength | 最大输入长度 | number | — | — |
| minlength | 最小输入长度 | number | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | large, small, mini | — |
| icon | 输入框尾部图标 | string | — | — |
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
| auto-complete | 原生属性，自动补全 | string | on, off | off |
| name | 原生属性 | string | - | -|
| max | 原生属性，设置最大值 | * | - | - |
| min | 原生属性，设置最小值 | * | - | - |
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
| form | 原生属性 | string | - | - |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| click | 点击 Input 内的图标时触发 | event |
| blur | 在 Input 失去焦点时触发 | event |
| focus | 在 Input 或得焦点时触发 | event |
# Development
```shell

2
packages/input/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-input",
"name": "element-input",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",

66
packages/loading/README.md Normal file
View File

@ -0,0 +1,66 @@
# element-loading
> A element-loading component for Vue.js.
## Demo
http://element-component.github.io/element-loading
## Installation
```shell
npm i element-loading -D
```
## Usage
```javascript
import Vue from 'vue'
import ElLoading from 'element-loading'
import 'element-theme-default/dist/loading.css'
Vue.use(ElLoading)
```
### 服务
Loading 还可以以服务的方式调用。引入 Loading 服务：
在需要调用时：
```javascript
Loading.service(options);
```
其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
```javascript
let loadingInstance = Loading.service(options);
loadingInstance.close();
```
需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
```javascript
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
```
此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
| body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
| text | 显示在加载图标下方的加载文案 | string | — | — |
| customClass | Loading 的自定义类名 | string | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/loading/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-loading",
"name": "element-loading",
"version": "0.0.0",
"description": "A loading component for Vue.js.",
"keywords": [

85
packages/menu/README.md Normal file
View File

@ -0,0 +1,85 @@
# element-menu
> A element-menu component for Vue.js.
## Demo
http://element-component.github.io/element-menu
## Installation
```shell
npm i element-menu -D
```
## Usage
```javascript
import Vue from 'vue'
import ElMenu from 'element-menu'
import 'element-theme-default/dist/menu.css'
Vue.use(ElMenu)
```
or
```javascript
import Vue from 'vue'
import {
ElMenu,
ElMenuItem,
ElSubmenu,
ElMenuItemGroup
} from 'element-menu'
Vue.component('el-menu', ElMenu)
Vue.component('el-menu', ElMenuItem)
Vue.component('el-menu', ElSubmenu)
Vue.component('el-menu', ElMenuItemGroup)
```
### Menu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | vertical |
| theme | 主题色 | string | light,dark | light |
| default-active | 当前激活菜单的 index | string | — | — |
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover |
| router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
### Menu Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| select | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path |
| open | SubMenu 展开的回调 | index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path |
| close | SubMenu 收起的回调 | index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path |
### SubMenu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一标志 | string | — | — |
### Menu-Item Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一标志 | string | — | — |
| route | Vue Router 路径对象 | Object | — | — |
### Menu-Group Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

4
packages/menu/package.json
View File

@ -1,6 +1,6 @@
{
"name": "el-menu",
"version": "0.0.0",
"name": "element-menu",
"version": "1.0.0",
"description": "A menu component for Vue.js.",
"keywords": [
"element",

71
packages/message-box/README.md Normal file
View File

@ -0,0 +1,71 @@
# element-message-box
> A element-message-box component for Vue.js.
## Demo
http://element-component.github.io/element-message-box
## Installation
```shell
npm i element-message-box -D
```
## Usage
```javascript
import Vue from 'vue'
import ElMessageBox from 'element-message-box'
import 'element-theme-default/dist/message.css'
Vue.use(ElMessageBox)
```
### 全局方法
Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
### 单独引用
单独引入 `MessageBox`：
```javascript
import { MessageBox } from 'element-ui';
```
对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | MessageBox 标题 | string | — | — |
| message | MessageBox 消息正文内容 | string | — | — |
| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
| customClass | MessageBox 的自定义类名 | string | — | — |
| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action)，action 的值为'confirm'或'cancel' | — | — |
| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
| showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
| closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | false |
| showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
| inputPlaceholder | 输入框的占位符 | string | — | — |
| inputPattern | 输入框的校验表达式 | regexp | — | — |
| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/message-box/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-message-box",
"name": "element-message-box",
"version": "0.0.0",
"description": "A message-box component for Vue.js.",
"keywords": [

54
packages/message/README.md Normal file
View File

@ -0,0 +1,54 @@
# element-message
> A element-message component for Vue.js.
## Demo
http://element-component.github.io/element-message
## Installation
```shell
npm i element-message -D
```
## Usage
```javascript
import Vue from 'vue'
import ElMessage from 'element-message'
import 'element-theme-default/dist/message.css'
Vue.use(ElMessage)
```
### 全局方法
Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | — | — |
| type | 主题 | string | success/warning/info/error | info |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
| showClose | 是否显示关闭按钮 | boolean | — | false |
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
### 方法
调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
| 方法名 | 说明 |
| ---- | ---- |
| close | 关闭当前的 Message |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/message/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-message",
"name": "element-message",
"version": "0.0.0",
"description": "A message component for Vue.js.",
"keywords": [

63
packages/notification/README.md Normal file
View File

@ -0,0 +1,63 @@
# element-notification
> A element-notification component for Vue.js.
## Demo
http://element-component.github.io/element-notification
## Installation
```shell
npm i element-notification -D
```
## Usage
```javascript
import Vue from 'vue'
import ElNotification from 'element-notification'
import 'element-theme-default/dist/notification.css'
Vue.use(ElNotification)
```
### 全局方法
Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
### 单独引用
单独引入 Notification：
```javascript
import { Notification } from 'element-ui';
```
此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | — | — |
| message | 说明文字 | string | — | — |
| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
| onClose | 关闭时的回调函数 | function | — | — |
| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
### 方法
调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
| 方法名 | 说明 |
| ---- | ---- |
| close | 关闭当前的 Notification |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/notification/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-notification",
"name": "element-notification",
"version": "0.0.0",
"description": "A notification component for Vue.js.",
"keywords": [

60
packages/pagination/README.md
View File

@ -1 +1,59 @@
## el-pagination
# element-pagination
> A element-pagination component for Vue.js.
## Demo
http://element-component.github.io/element-pagination
## Installation
```shell
npm i element-pagination -D
```
## Usage
```javascript
import Vue from 'vue'
import ElPagination from 'element-pagination'
import 'element-theme-default/dist/pagination.css'
Vue.use(ElPagination)
```
or
```javascript
import Vue from 'vue'
import ElPagination from 'element-pagination'
Vue.component('el-pagination', ElPagination)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 是否使用小型分页样式 | Boolean | — | false |
| page-size | 每页显示条目个数 | Number | — | 10 |
| total | 总条目数 | Number | — | - |
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
| current-page | 当前页数 | Number | — | 1 |
| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | Number[] | — | [10, 20, 30, 40, 50, 100] |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| size-change | pageSize 改变时会触发 | 每页条数`size` |
| current-change | currentPage 改变时会触发 | 当前页`currentPage` |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/pagination/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-pagination",
"name": "element-pagination",
"version": "0.0.0",
"description": "A pagination component for Vue.js.",
"keywords": [

71
packages/popover/README.md Normal file
View File

@ -0,0 +1,71 @@
# element-popover
> A element-popover component for Vue.js.
## Demo
http://element-component.github.io/element-popover
## Installation
```shell
npm i element-popover -D
```
## Usage
```javascript
import Vue from 'vue'
import ElPopover from 'element-popover'
import 'element-theme-default/dist/popover.css'
Vue.use(ElPopover)
```
or
```javascript
import Vue from 'vue'
import ElPopover from 'element-popover'
Vue.component('el-popover', ElPopover)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 触发方式 | String | click/focus/hover/manual | click |
| title | 标题 | String | — | — |
| content | 显示的内容，也可以通过 `slot` 传入 DOM | String | — | — |
| width | 宽度 | String, Number | — | 最小宽度 150px |
| placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value(v-model) | 状态是否可见 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | — | fade-in-linear |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 为 popper 添加类名 | String | - | -|
### Slot
| 参数 | 说明 |
|--- | ---|
| — | Popover 内嵌 HTML 文本 |
| reference | 触发 Popover 显示的 HTML 元素 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| show | 显示时触发 | — |
| hide | 隐藏时触发 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/popover/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-popover",
"name": "element-popover",
"version": "0.0.0",
"description": "A popover component for Vue.js.",
"keywords": [

54
packages/progress/README.md Normal file
View File

@ -0,0 +1,54 @@
# element-progress
> A element-progress component for Vue.js.
## Demo
http://element-component.github.io/element-progress
## Installation
```shell
npm i element-progress -D
```
## Usage
```javascript
import Vue from 'vue'
import ElProgress from 'element-progress'
import 'element-theme-default/dist/progress.css'
Vue.use(ElProgress)
```
or
```javascript
import Vue from 'vue'
import ElProgress from 'element-progress'
Vue.component('el-progress', ElProgress)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条类型 | string | line/circle | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
| status | 进度条当前状态 | string | success/exception | — |
| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/progress/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-progress",
"name": "element-progress",
"version": "1.0.1",
"description": "A progress component for Vue.",
"main": "lib/index.js",

43
packages/radio/README.md
View File

@ -1,18 +1,18 @@
# el-radio
> A el-radio component for Vue.js.
# element-radio
> A element-radio component for Vue.js.
## Demo
http://element-component.github.io/el-radio
http://element-component.github.io/element-radio
## Installation
```shell
npm i el-radio -D
npm i element-radio -D
```
## Usage
```javascript
import Vue from 'vue'
import ElRadio from 'el-radio'
import ElRadio from 'element-radio'
import 'element-theme-default/dist/radio.css'
Vue.use(ElRadio)
@ -22,19 +22,40 @@ or
```javascript
import Vue from 'vue'
import { ElRadio } from 'el-radio'
import { ElRadio } from 'element-radio'
import { RadioButton } from 'element-radio'
import { RadioGroup } from 'element-radio'
Vue.component('el-radio', ElRadio)
Vue.component('el-radio-button', RadioButton)
Vue.component('el-radio-group', RadioGroup)
```
## Options
## Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| model | 绑定值 | string | | |
| value | 真实值 | string | | |
| label | 显示值，默认显示 value | string | | |
| disabled | 禁用 | boolean | true, false | false |
| label | Radio 的 value | string,number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 属性 | string | — | — |
## Radio-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | Radio 按钮组尺寸 | string | large, small | — |
## Radio-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
## Radio-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
## Development
```shell

2
packages/radio/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-radio",
"name": "element-radio",
"version": "1.0.0",
"description": "A radio component for Vue.js.",
"keywords": [

67
packages/rate/README.md Normal file
View File

@ -0,0 +1,67 @@
# element-rate
> A element-rate component for Vue.js.
## Demo
http://element-component.github.io/element-rate
## Installation
```shell
npm i element-rate -D
```
## Usage
```javascript
import Vue from 'vue'
import ElRate from 'element-rate'
import 'element-theme-default/dist/rate.css'
Vue.use(ElRate)
```
or
```javascript
import Vue from 'vue'
import ElRate from 'element-rate'
Vue.component('el-rate', ElRate)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| max | 最大分值 | number | — | 5 |
| disabled | 是否为只读 | boolean | — | false |
| allow-half | 是否允许半选 | boolean | — | false |
| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
| disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
| show-text | 是否显示辅助文字 | boolean | — | false |
| text-color | 辅助文字的颜色 | string | — | 1F2D3D |
| texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| text-template | 只读时的辅助文字模板 | string | — | {value} |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 分值改变时触发 | 改变后的分值 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/rate/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-rate",
"name": "element-rate",
"version": "0.0.0",
"description": "A rate component for Vue.js.",
"keywords": [

50
packages/row/README.md Normal file
View File

@ -0,0 +1,50 @@
# element-row
> A element-row component for Vue.js.
## Demo
http://element-component.github.io/element-row
## Installation
```shell
npm i element-row -D
```
## Usage
```javascript
import Vue from 'vue'
import ElRow from 'element-row'
import 'element-theme-default/dist/row.css'
Vue.use(ElRow)
```
or
```javascript
import Vue from 'vue'
import ElRow from 'element-row'
Vue.component('el-row', ElRow)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | 栅格间隔 | number | — | 0 |
| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/row/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-row",
"name": "element-row",
"version": "1.0.2",
"description": "A row component for Vue.",
"keywords": [

74
packages/select/README.md
View File

@ -1,12 +1,12 @@
# el-select
> A el-select component for Vue.js.
# element-select
> A element-select component for Vue.js.
## dependencies
- vue-clickoutside
## Installation
```shell
npm i el-select -D
npm i element-select -D
```
## Usage
@ -14,55 +14,55 @@ npm i el-select -D
import vue from 'Vue'
// import component
import Component from 'el-select'
import 'el-select/lib/style.css'
import Component from 'element-select'
import 'element-select/lib/style.css'
Vue.use(Component)
```
or
```javascript
import {
ElSelect,
ElOption,
ElOptionGroup
} from 'el-select'
import { ElSelect, ElOption, ElOptionGroup } from 'element-select'
Vue.component('el-select', ElSelect)
Vue.component('el-option', ElOption)
Vue.component('el-option-group', ElOptionGroup)
```
## API
### Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| size | 输入框尺寸 | string | large/small/mini | — |
| clearable | 单选时是否可以清空选项 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
| filter-method | 自定义过滤方法 | function | — | — |
| remote | 是否为远程搜索 | boolean | — | false |
| remote-method | 远程搜索方法 | function | — | — |
| loading | 是否正在从远程获取数据 | boolean | — | false |
### el-elect
### Select Events
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| change | 选中值发生变化时触发 | 目前的选中值 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| model | 绑定值 | string, string[] | | |
| type | 显示类型, search 会带搜索框，multiple 允许多选 | string | normal, search, multiple | normal |
| placeholder | 输入框占位文本 | string | | |
| hint-placeholder | 获取焦点后显示的占位文本 | string | | |
| search-placeholder | 搜索框占位内容 | string | | |
| search-model | 搜索结果绑定值 | string | | |
| disabled | 禁用 | boolean | true, false | false |
| change | 选中值后的回调函数, 返回当前选中的值 | function | | ||
### Option Group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 分组的组名 | string | — | — |
| disabled | 是否将该分组下所有选项置为禁用 | boolean | — | false |
### el-option
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| label| 显示值，可选 | string| | |
| value| 真实值| string| | |
| remark| 额外信息，将显示在右边| string| | |
| disabled | 禁用| boolean | true, false | false |
### el-option-group
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| hide-title | 隐藏标题| boolean |true, false |false|
| hide-list | 隐藏列表| boolean |true, false |false|
| title| 真实值| 分组标题| | |
### Option Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 选项的值 | string/number/object | — | — |
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
| disabled | 是否禁用该选项 | boolean | — | false |
## Development

14
packages/select/_index.js
View File

@ -1,12 +1,12 @@
import Select from './src/select';
import Option from './src/option';
import OptionGroup from './src/option-group';
import ElSelect from './src/select';
import ElOption from './src/option';
import ElOptionGroup from './src/option-group';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(OptionGroup.name, OptionGroup);
Vue.component(ElSelect.name, ElSelect);
Vue.component(ElOption.name, ElOption);
Vue.component(ElOptionGroup.name, ElOptionGroup);
};
export { Select, Option, OptionGroup };
export { ElSelect, ElOption, ElOptionGroup };

2
packages/select/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-select",
"name": "element-select",
"version": "1.0.1",
"description": "A el-select component for Vue.",
"main": "lib/index.js",

57
packages/slider/README.md Normal file
View File

@ -0,0 +1,57 @@
# element-slider
> A element-slider component for Vue.js.
## Demo
http://element-component.github.io/element-slider
## Installation
```shell
npm i element-slider -D
```
## Usage
```javascript
import Vue from 'vue'
import ElSlider from 'element-slider'
import 'element-theme-default/dist/slider.css'
Vue.use(ElSlider)
```
or
```javascript
import Vue from 'vue'
import ElSlider from 'element-slider'
Vue.component('el-slider', ElSlider)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| min | 最小值 | number | — | 0 |
| max | 最大值 | number | — | 100 |
| disabled | 是否禁用 | boolean | — | false |
| step | 步长 | number | — | 1 |
| show-input | 是否显示输入框 | boolean | — | false |
| show-stops | 是否显示间断点 | boolean | — | false |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 值改变时触发 | 改变后的值 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/slider/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-slider",
"name": "element-slider",
"version": "0.0.0",
"description": "A slider component for Vue.js.",
"keywords": [

69
packages/steps/README.md Normal file
View File

@ -0,0 +1,69 @@
# element-steps
> A element-steps component for Vue.js.
## Demo
http://element-component.github.io/element-steps
## Installation
```shell
npm i element-steps -D
```
## Usage
```javascript
import Vue from 'vue'
import ElStep from 'element-steps'
import 'element-theme-default/dist/step.css'
Vue.use(ElStep)
```
or
```javascript
import Vue from 'vue'
import { ElSteps, ElStep } from 'element-steps'
Vue.component('el-steps', ElSteps)
Vue.component('el-step', ElStep)
```
### Steps Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距 | Number | — | — |
| direction | 显示方向 | string | vertical/horizontal | horizontal |
| active | 设置当前激活步骤 | number | — | 0 |
| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
| align-center | 标题描述居中对齐 | boolean | false, true | false |
### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 标题 | string | — | — |
| description | 描述性文字 | string | — | — |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
### Step Slot
| name | 说明 |
|----|----|
| icon | 图标 |
| title | 标题 |
| description | 描述性文字 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

10
packages/steps/_index.js
View File

@ -1,10 +1,10 @@
import Steps from './src/steps';
import Step from './src/step';
import ElSteps from './src/steps';
import ElStep from './src/step';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(Steps.name, Steps);
Vue.component(Step.name, Step);
Vue.component(ElSteps.name, ElSteps);
Vue.component(ElStep.name, ElStep);
};
export { Step, Steps };
export { ElStep, ElSteps };

2
packages/steps/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-steps",
"name": "element-steps",
"version": "0.0.0",
"description": "A steps component for Vue.js.",
"keywords": [

30
packages/switch/README.md
View File

@ -1,15 +1,15 @@
# el-switch
> A el-switch component for Vue.js.
# element-switch
> A element-switch component for Vue.js.
## Installation
```shell
npm i el-switch -D
npm i element-switch -D
```
## Usage
```javascript
import Vue from 'vue'
import ElSwitch from 'el-switch'
import ElSwitch from 'element-switch'
import 'element-theme-default'
Vue.use(ElSwitch)
@ -19,17 +19,29 @@ or
```javascript
import Vue from 'vue'
import { ElSwitch } from 'el-switch'
import ElSwitch from 'element-switch'
Vue.component('el-switch', ElSwitch)
```
### Attributes
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| disabled | 是否禁用 | boolean | — | false |
| width | switch 的宽度（像素） | number | — | 58（有文字）/ 46（无文字） |
| on-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `on-text` | string | — | — |
| off-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text` | string | — | — |
| on-text | switch 打开时的文字 | string | — | ON |
| off-text | switch 关闭时的文字 | string | — | OFF |
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — |
| name | description | type | default |
|-------------|-------------|-------------|-------------|
| | | | |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
## Development
```shell

2
packages/switch/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-switch",
"name": "element-switch",
"version": "1.0.0",
"description": "A switch component for vue.js",
"keywords": [

78
packages/table/README.md
View File

@ -1,18 +1,18 @@
# el-table
> A el-table component for Vue.js.
# element-table
> A element-table component for Vue.js.
## Demo
http://element-component.github.io/el-table
http://element-component.github.io/element-table
## Installation
```shell
npm i el-table -D
npm i element-table -D
```
## Usage
```javascript
import Vue from 'vue'
import ElTable from 'el-table'
import ElTable from 'element-table'
import 'element-theme-default'
Vue.use(ElTable)
@ -22,17 +22,75 @@ or
```javascript
import Vue from 'vue'
import { ElTable } from 'el-table'
import { ElTable } from 'element-table'
import { ElTableColumn } from 'element-table'
Vue.component('el-table', ElTable)
Vue.component('el-table-column', ElTableColumn)
```
## Options
### Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | — | — |
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。 | string/number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | - | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |
| name | description | type | default |
|-------------|-------------|-------------|-------------|
| | | | |
### Table Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
| row-click | 当某一行被点击时会触发该事件 | row, event |
| row-dblclick | 当某一行被双击时会触发该事件 | row, event |
| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
### Table Methods
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| clearSelection | 清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
| toggleRowSelection | 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
### Table-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
| label | 显示的标题 | string | — | — |
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | — | — |
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
| formatter | 用来格式化内容 | Function(row, column) | — | — |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — |
| align | 对齐方式 | String | left, center, right | left |
| class-name | 列的 className | string | — | — |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
## Development
```shell

2
packages/table/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-table",
"name": "element-table",
"version": "1.0.0",
"description": "A table component for Vue.",
"keywords": [

65
packages/tabs/README.md Normal file
View File

@ -0,0 +1,65 @@
# element-tabs
> A element-tabs component for Vue.js.
## Demo
http://element-component.github.io/element-tabs
## Installation
```shell
npm i element-tabs -D
```
## Usage
```javascript
import Vue from 'vue'
import ElTabs from 'element-tabs'
import 'element-theme-default/dist/tabs.css'
Vue.use(ElTabs)
```
or
```javascript
import Vue from 'vue'
import { ElTabs } from 'element-tabs'
import { ElTabPane } from 'element-tabs'
Vue.component('el-tabs', ElTabs)
Vue.component('el-tab', ElTab)
```
### Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card/border-card | — |
| closable | 标签是否可关闭 | boolean | — | false |
| active-name | 选中选项卡的 name | string | — | 第一个选项卡的 name |
### Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 |
| tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 |
### Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | — | — |
| label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
| disabled | 是否禁用 | boolean | - | false |
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/tabs/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-tabs",
"name": "element-tabs",
"version": "1.0.0",
"description": "A tabs component for Vue.",
"keywords": [

57
packages/tag/README.md Normal file
View File

@ -0,0 +1,57 @@
# element-tag
> A element-tag component for Vue.js.
## Demo
http://element-component.github.io/element-tag
## Installation
```shell
npm i element-tag -D
```
## Usage
```javascript
import Vue from 'vue'
import ElTag from 'element-tag'
import 'element-theme-default/dist/tag.css'
Vue.use(ElTag)
```
or
```javascript
import Vue from 'vue'
import ElTag from 'element-tag'
Vue.component('el-tag', ElTag)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 主题 | string | primary/gray/success/warning/danger | — |
| closable | 是否可关闭 | boolean | — | false |
| close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
| hit | 是否有边框描边 | boolean | — | false |
| color | 背景色 | string | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | 关闭tag时触发的事件 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/tag/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-tag",
"name": "element-tag",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",

57
packages/tooltip/README.md Normal file
View File

@ -0,0 +1,57 @@
# element-tooltip
> A element-tooltip component for Vue.js.
## Demo
http://element-component.github.io/element-tooltip
## Installation
```shell
npm i element-tooltip -D
```
## Usage
```javascript
import Vue from 'vue'
import ElTooltip from 'element-tooltip'
import 'element-theme-default/dist/tooltip.css'
Vue.use(ElTooltip)
```
or
```javascript
import Vue from 'vue'
import ElTooltip from 'element-tooltip'
Vue.component('el-tooltip', ElTooltip)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| effect | 默认提供的主题 | String | dark/light | dark |
| content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | — |
| placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value(v-model) | 状态是否可见 | Boolean | — | false |
| disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | — | `fade-in-linear` |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/tooltip/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-tooltip",
"name": "element-tooltip",
"version": "0.0.0",
"description": "A tooltip component for Vue.js.",
"keywords": [

83
packages/tree/README.md Normal file
View File

@ -0,0 +1,83 @@
# element-tree
> A element-tree component for Vue.js.
## Demo
http://element-component.github.io/element-tree
## Installation
```shell
npm i element-tree -D
```
## Usage
```javascript
import Vue from 'vue'
import ElTree from 'element-tree'
import 'element-theme-default/dist/tree.css'
Vue.use(ElTree)
```
or
```javascript
import Vue from 'vue'
import ElTree from 'element-tree'
Vue.component('el-tree', ElTree)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 展示数据 | array | — | — |
| empty-text | 内容为空的时候展示的文本 | String | — | — |
| node-key | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的 | String | — | — |
| props | 配置选项，具体看下表 | object | — | — |
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
| highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
| show-checkbox | 节点是否可被选择 | boolean | — | false |
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false |
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | - | - |
### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 指定节点标签为节点对象的某个属性值 | string | — | — |
| children | 指定子树为节点对象的某个属性值 | string | — | — |
### 方法
`Tree` 拥有如下方法，返回目前被选中的节点数组：
| 方法名 | 说明 | 参数 |
|------|--------|------|
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/tree/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-tree",
"name": "element-tree",
"version": "0.0.0",
"description": "A tree component for Vue.js.",
"keywords": [

67
packages/upload/README.md Normal file
View File

@ -0,0 +1,67 @@
# element-upload
> A element-upload component for Vue.js.
## Demo
http://element-component.github.io/element-upload
## Installation
```shell
npm i element-upload -D
```
## Usage
```javascript
import Vue from 'vue'
import ElUpload from 'element-upload'
import 'element-theme-default/dist/upload.css'
Vue.use(ElUpload)
```
or
```javascript
import Vue from 'vue'
import ElUpload from 'element-upload'
Vue.component('el-upload', ElUpload)
```
### Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | — | — |
| headers | 可选参数, 设置上传的请求头部 | object | — | — |
| multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
| data | 可选参数, 上传时附带的额外参数 | object | — | — |
| name | 可选参数, 上传的文件字段名 | string | — | file |
| with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |
| show-upload-list | 是否显示已上传文件列表 | boolean | — | true |
| type | 上传控件类型 | string | select,drag | select |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |
| on-preview | 可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据 | function(file) | — | — |
| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
| on-success | 可选参数, 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
| on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
| before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
| thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
| default-file-list | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
### Methods
| 方法名 | 说明 | 参数 |
|---------- |-------------- | - |
| clearFiles | 清空已上传的文件列表 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)

2
packages/upload/package.json
View File

@ -1,5 +1,5 @@
{
"name": "el-upload",
"name": "element-upload",
"version": "0.0.0",
"description": "A upload component for Vue.js.",
"keywords": [