diff --git a/examples/docs/zh-CN/slider.md b/examples/docs/zh-CN/slider.md index 5cd3a484f..334f9be1f 100644 --- a/examples/docs/zh-CN/slider.md +++ b/examples/docs/zh-CN/slider.md @@ -143,7 +143,7 @@ ``` ::: -## Attributes +### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | min | 最小值 | number | — | 0 | @@ -153,7 +153,7 @@ | show-input | 是否显示输入框 | boolean | — | false | | show-stops | 是否显示间断点 | boolean | — | false | -## Events +### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | change | 值改变时触发 | 改变后的值 | diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 9f24dc462..22a67b3fd 100644 --- a/examples/docs/zh-CN/upload.md +++ b/examples/docs/zh-CN/upload.md @@ -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 | 清空已上传的文件列表 | — | diff --git a/packages/alert/README.md b/packages/alert/README.md new file mode 100644 index 000000000..d96d46ee0 --- /dev/null +++ b/packages/alert/README.md @@ -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) diff --git a/packages/alert/package.json b/packages/alert/package.json index 0365df79a..4f802b172 100644 --- a/packages/alert/package.json +++ b/packages/alert/package.json @@ -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", diff --git a/packages/autocomplete/README.md b/packages/autocomplete/README.md new file mode 100644 index 000000000..4ef14c607 --- /dev/null +++ b/packages/autocomplete/README.md @@ -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) diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json index d4d2dc7e6..cdb1f170c 100644 --- a/packages/autocomplete/package.json +++ b/packages/autocomplete/package.json @@ -1,5 +1,5 @@ { - "name": "el-autocomplete", + "name": "element-autocomplete", "version": "1.0.0", "description": "A autocomplete component for Vue.", "keywords": [ diff --git a/packages/badge/README.md b/packages/badge/README.md new file mode 100644 index 000000000..6dcd5eb1e --- /dev/null +++ b/packages/badge/README.md @@ -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) diff --git a/packages/badge/package.json b/packages/badge/package.json index 76b448619..4f803072b 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -1,5 +1,5 @@ { - "name": "el-badge", + "name": "element-badge", "version": "0.0.0", "description": "A badge component for Vue.js.", "keywords": [ diff --git a/packages/breadcrumb/README.md b/packages/breadcrumb/README.md new file mode 100644 index 000000000..85d42303f --- /dev/null +++ b/packages/breadcrumb/README.md @@ -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) diff --git a/packages/breadcrumb/_index.js b/packages/breadcrumb/_index.js new file mode 100644 index 000000000..b0acb57bd --- /dev/null +++ b/packages/breadcrumb/_index.js @@ -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 +}; diff --git a/packages/breadcrumb/cooking.conf.js b/packages/breadcrumb/cooking.conf.js index bb47057c6..ebbbb4111 100644 --- a/packages/breadcrumb/cooking.conf.js +++ b/packages/breadcrumb/cooking.conf.js @@ -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, diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json index 5368b8796..f71999210 100644 --- a/packages/breadcrumb/package.json +++ b/packages/breadcrumb/package.json @@ -1,5 +1,5 @@ { - "name": "el-breadcrumb", + "name": "element-breadcrumb", "version": "1.0.0", "description": "A breadcrumb component for Vue.", "keywords": [ diff --git a/packages/button/README.md b/packages/button/README.md new file mode 100644 index 000000000..8ee661056 --- /dev/null +++ b/packages/button/README.md @@ -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) diff --git a/packages/button/package.json b/packages/button/package.json index c8436907e..ff7ab31ad 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -1,5 +1,5 @@ { - "name": "el-button", + "name": "element-button", "version": "1.0.0", "description": "A button component for Vue.", "keywords": [ diff --git a/packages/card/README.md b/packages/card/README.md new file mode 100644 index 000000000..60fc25c2c --- /dev/null +++ b/packages/card/README.md @@ -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) diff --git a/packages/card/package.json b/packages/card/package.json index 04196dc30..e70e4fd6d 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -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", diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md index 58b8ffdf4..123d8c2dc 100644 --- a/packages/checkbox/README.md +++ b/packages/checkbox/README.md @@ -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 diff --git a/packages/checkbox/index.js b/packages/checkbox/index.js index e756c599c..eada9351a 100644 --- a/packages/checkbox/index.js +++ b/packages/checkbox/index.js @@ -6,4 +6,3 @@ ElCheckbox.install = function(Vue) { }; export default ElCheckbox; - diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 632349b6b..b07fd2e6d 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -1,5 +1,5 @@ { - "name": "el-checkbox", + "name": "element-checkbox", "version": "1.0.2", "description": "A checkbox component for Vue.", "keywords": [ diff --git a/packages/col/README.md b/packages/col/README.md new file mode 100644 index 000000000..ce0f7dae3 --- /dev/null +++ b/packages/col/README.md @@ -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) diff --git a/packages/col/package.json b/packages/col/package.json index 0220a837e..821a3d5f9 100644 --- a/packages/col/package.json +++ b/packages/col/package.json @@ -1,5 +1,5 @@ { - "name": "el-col", + "name": "element-col", "version": "1.0.0", "description": "A row component for Vue.", "keywords": [ diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md index 8d8ff9a1e..5a8c029d1 100644 --- a/packages/date-picker/README.md +++ b/packages/date-picker/README.md @@ -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 - + ``` +### 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 diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json index 10cc9969d..ad7ae4b57 100644 --- a/packages/date-picker/package.json +++ b/packages/date-picker/package.json @@ -1,5 +1,5 @@ { - "name": "el-datepicker", + "name": "element-datepicker", "version": "1.0.0", "description": "A datepicker component for Vue.", "keywords": [ diff --git a/packages/dialog/README.md b/packages/dialog/README.md index ccbc4886b..cc7d69cff 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -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 diff --git a/packages/dialog/package.json b/packages/dialog/package.json index 1b63e75a4..eb07bdf7e 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -1,5 +1,5 @@ { - "name": "el-dialog", + "name": "element-dialog", "version": "1.0.0", "description": "A dialog component for Vue.", "keywords": [ diff --git a/packages/dropdown/README.md b/packages/dropdown/README.md new file mode 100644 index 000000000..30edb8da9 --- /dev/null +++ b/packages/dropdown/README.md @@ -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) diff --git a/packages/dropdown/_index.js b/packages/dropdown/_index.js new file mode 100644 index 000000000..0fe6480e4 --- /dev/null +++ b/packages/dropdown/_index.js @@ -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 +}; diff --git a/packages/dropdown/cooking.conf.js b/packages/dropdown/cooking.conf.js index ef96cc5e9..45fad9cb3 100644 --- a/packages/dropdown/cooking.conf.js +++ b/packages/dropdown/cooking.conf.js @@ -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, diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json index 1d8b02a12..ffb0856b9 100644 --- a/packages/dropdown/package.json +++ b/packages/dropdown/package.json @@ -1,5 +1,5 @@ { - "name": "el-dropdown", + "name": "element-dropdown", "version": "1.0.0", "description": "A dropdown component for Vue.", "keywords": [ diff --git a/packages/form/README.md b/packages/form/README.md new file mode 100644 index 000000000..dd1fb165a --- /dev/null +++ b/packages/form/README.md @@ -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) diff --git a/packages/form/package.json b/packages/form/package.json index 43c41d05c..230d3aa9e 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,5 +1,5 @@ { - "name": "el-form", + "name": "element-form", "version": "1.0.0", "description": "A form component for Vue.", "keywords": [ diff --git a/packages/input-number/README.md b/packages/input-number/README.md index 1dd4f26e3..32d284139 100644 --- a/packages/input-number/README.md +++ b/packages/input-number/README.md @@ -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) diff --git a/packages/input-number/package.json b/packages/input-number/package.json index 912704391..28e0d7805 100644 --- a/packages/input-number/package.json +++ b/packages/input-number/package.json @@ -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", diff --git a/packages/input/README.md b/packages/input/README.md index 1dd4f26e3..654b442cb 100644 --- a/packages/input/README.md +++ b/packages/input/README.md @@ -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 diff --git a/packages/input/package.json b/packages/input/package.json index 2b4531152..971035f20 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -1,5 +1,5 @@ { - "name": "el-input", + "name": "element-input", "version": "1.0.1", "description": "A input component for Vue.", "main": "lib/index.js", diff --git a/packages/loading/README.md b/packages/loading/README.md new file mode 100644 index 000000000..f281596d4 --- /dev/null +++ b/packages/loading/README.md @@ -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) diff --git a/packages/loading/package.json b/packages/loading/package.json index a2d77b658..d3c304595 100644 --- a/packages/loading/package.json +++ b/packages/loading/package.json @@ -1,5 +1,5 @@ { - "name": "el-loading", + "name": "element-loading", "version": "0.0.0", "description": "A loading component for Vue.js.", "keywords": [ diff --git a/packages/menu/README.md b/packages/menu/README.md new file mode 100644 index 000000000..c89d89437 --- /dev/null +++ b/packages/menu/README.md @@ -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) diff --git a/packages/menu/package.json b/packages/menu/package.json index 7d4855307..b7d592ed5 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -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", diff --git a/packages/message-box/README.md b/packages/message-box/README.md new file mode 100644 index 000000000..c6f155ccf --- /dev/null +++ b/packages/message-box/README.md @@ -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) diff --git a/packages/message-box/package.json b/packages/message-box/package.json index aaac875d3..e8825d8cb 100644 --- a/packages/message-box/package.json +++ b/packages/message-box/package.json @@ -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": [ diff --git a/packages/message/README.md b/packages/message/README.md new file mode 100644 index 000000000..1bc60e8ad --- /dev/null +++ b/packages/message/README.md @@ -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) diff --git a/packages/message/package.json b/packages/message/package.json index 87f66d815..ae64b4798 100644 --- a/packages/message/package.json +++ b/packages/message/package.json @@ -1,5 +1,5 @@ { - "name": "el-message", + "name": "element-message", "version": "0.0.0", "description": "A message component for Vue.js.", "keywords": [ diff --git a/packages/notification/README.md b/packages/notification/README.md new file mode 100644 index 000000000..dcd604a3f --- /dev/null +++ b/packages/notification/README.md @@ -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) diff --git a/packages/notification/package.json b/packages/notification/package.json index 182bda1dc..5db7bf936 100644 --- a/packages/notification/package.json +++ b/packages/notification/package.json @@ -1,5 +1,5 @@ { - "name": "el-notification", + "name": "element-notification", "version": "0.0.0", "description": "A notification component for Vue.js.", "keywords": [ diff --git a/packages/pagination/README.md b/packages/pagination/README.md index 9b9a79bb3..1e1ea333c 100644 --- a/packages/pagination/README.md +++ b/packages/pagination/README.md @@ -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) diff --git a/packages/pagination/package.json b/packages/pagination/package.json index 3077ae402..a72ee8b27 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -1,5 +1,5 @@ { - "name": "el-pagination", + "name": "element-pagination", "version": "0.0.0", "description": "A pagination component for Vue.js.", "keywords": [ diff --git a/packages/popover/README.md b/packages/popover/README.md new file mode 100644 index 000000000..78ba91752 --- /dev/null +++ b/packages/popover/README.md @@ -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) diff --git a/packages/popover/package.json b/packages/popover/package.json index da74bad6b..d05a79055 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -1,5 +1,5 @@ { - "name": "el-popover", + "name": "element-popover", "version": "0.0.0", "description": "A popover component for Vue.js.", "keywords": [ diff --git a/packages/progress/README.md b/packages/progress/README.md new file mode 100644 index 000000000..f943af7dd --- /dev/null +++ b/packages/progress/README.md @@ -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) diff --git a/packages/progress/package.json b/packages/progress/package.json index 06559b184..33c42bccb 100644 --- a/packages/progress/package.json +++ b/packages/progress/package.json @@ -1,5 +1,5 @@ { - "name": "el-progress", + "name": "element-progress", "version": "1.0.1", "description": "A progress component for Vue.", "main": "lib/index.js", diff --git a/packages/radio/README.md b/packages/radio/README.md index 7253378a1..5e248c0da 100644 --- a/packages/radio/README.md +++ b/packages/radio/README.md @@ -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 diff --git a/packages/radio/package.json b/packages/radio/package.json index ef3092d81..c5929cb44 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -1,5 +1,5 @@ { - "name": "el-radio", + "name": "element-radio", "version": "1.0.0", "description": "A radio component for Vue.js.", "keywords": [ diff --git a/packages/rate/README.md b/packages/rate/README.md new file mode 100644 index 000000000..f6dfd567f --- /dev/null +++ b/packages/rate/README.md @@ -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) diff --git a/packages/rate/package.json b/packages/rate/package.json index 9280b8f58..f2833d38b 100644 --- a/packages/rate/package.json +++ b/packages/rate/package.json @@ -1,5 +1,5 @@ { - "name": "el-rate", + "name": "element-rate", "version": "0.0.0", "description": "A rate component for Vue.js.", "keywords": [ diff --git a/packages/row/README.md b/packages/row/README.md new file mode 100644 index 000000000..42b49bcdf --- /dev/null +++ b/packages/row/README.md @@ -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) diff --git a/packages/row/package.json b/packages/row/package.json index 33cd3fc06..e376c571a 100644 --- a/packages/row/package.json +++ b/packages/row/package.json @@ -1,5 +1,5 @@ { - "name": "el-row", + "name": "element-row", "version": "1.0.2", "description": "A row component for Vue.", "keywords": [ diff --git a/packages/select/README.md b/packages/select/README.md index a6ad1e76a..07b7aed2d 100644 --- a/packages/select/README.md +++ b/packages/select/README.md @@ -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 diff --git a/packages/select/_index.js b/packages/select/_index.js index a6b87fd2c..ea3f29e94 100644 --- a/packages/select/_index.js +++ b/packages/select/_index.js @@ -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 }; diff --git a/packages/select/package.json b/packages/select/package.json index bbb902cf6..b527446fe 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -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", diff --git a/packages/slider/README.md b/packages/slider/README.md new file mode 100644 index 000000000..b82392840 --- /dev/null +++ b/packages/slider/README.md @@ -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) diff --git a/packages/slider/package.json b/packages/slider/package.json index 81412a12e..acde3777e 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -1,5 +1,5 @@ { - "name": "el-slider", + "name": "element-slider", "version": "0.0.0", "description": "A slider component for Vue.js.", "keywords": [ diff --git a/packages/steps/README.md b/packages/steps/README.md new file mode 100644 index 000000000..8ad8f47b5 --- /dev/null +++ b/packages/steps/README.md @@ -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) diff --git a/packages/steps/_index.js b/packages/steps/_index.js index 6d9315b55..b501b33c6 100644 --- a/packages/steps/_index.js +++ b/packages/steps/_index.js @@ -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 }; diff --git a/packages/steps/package.json b/packages/steps/package.json index 68c1c5f64..cbd14bf9f 100644 --- a/packages/steps/package.json +++ b/packages/steps/package.json @@ -1,5 +1,5 @@ { - "name": "el-steps", + "name": "element-steps", "version": "0.0.0", "description": "A steps component for Vue.js.", "keywords": [ diff --git a/packages/switch/README.md b/packages/switch/README.md index 99201710a..123fda4dc 100644 --- a/packages/switch/README.md +++ b/packages/switch/README.md @@ -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 diff --git a/packages/switch/package.json b/packages/switch/package.json index d0aec0f34..74cfd9c6c 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -1,5 +1,5 @@ { - "name": "el-switch", + "name": "element-switch", "version": "1.0.0", "description": "A switch component for vue.js", "keywords": [ diff --git a/packages/table/README.md b/packages/table/README.md index 154652806..e791e948f 100644 --- a/packages/table/README.md +++ b/packages/table/README.md @@ -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 diff --git a/packages/table/package.json b/packages/table/package.json index 23de4556f..9bacda0e2 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -1,5 +1,5 @@ { - "name": "el-table", + "name": "element-table", "version": "1.0.0", "description": "A table component for Vue.", "keywords": [ diff --git a/packages/tabs/README.md b/packages/tabs/README.md new file mode 100644 index 000000000..fd7515ea2 --- /dev/null +++ b/packages/tabs/README.md @@ -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) diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 1810d2046..b2e0262db 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -1,5 +1,5 @@ { - "name": "el-tabs", + "name": "element-tabs", "version": "1.0.0", "description": "A tabs component for Vue.", "keywords": [ diff --git a/packages/tag/README.md b/packages/tag/README.md new file mode 100644 index 000000000..8ec0ab75b --- /dev/null +++ b/packages/tag/README.md @@ -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) diff --git a/packages/tag/package.json b/packages/tag/package.json index e76a3698c..7e2bac03a 100644 --- a/packages/tag/package.json +++ b/packages/tag/package.json @@ -1,5 +1,5 @@ { - "name": "el-tag", + "name": "element-tag", "version": "1.0.1", "description": "A input component for Vue.", "main": "lib/index.js", diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md new file mode 100644 index 000000000..00b81b614 --- /dev/null +++ b/packages/tooltip/README.md @@ -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) diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index a8a57a345..f160fa668 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -1,5 +1,5 @@ { - "name": "el-tooltip", + "name": "element-tooltip", "version": "0.0.0", "description": "A tooltip component for Vue.js.", "keywords": [ diff --git a/packages/tree/README.md b/packages/tree/README.md new file mode 100644 index 000000000..564818653 --- /dev/null +++ b/packages/tree/README.md @@ -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) diff --git a/packages/tree/package.json b/packages/tree/package.json index b86a4c5b8..1e933612a 100644 --- a/packages/tree/package.json +++ b/packages/tree/package.json @@ -1,5 +1,5 @@ { - "name": "el-tree", + "name": "element-tree", "version": "0.0.0", "description": "A tree component for Vue.js.", "keywords": [ diff --git a/packages/upload/README.md b/packages/upload/README.md new file mode 100644 index 000000000..2b4a9075d --- /dev/null +++ b/packages/upload/README.md @@ -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) diff --git a/packages/upload/package.json b/packages/upload/package.json index 832b7ab5d..a72ca2b8e 100644 --- a/packages/upload/package.json +++ b/packages/upload/package.json @@ -1,5 +1,5 @@ { - "name": "el-upload", + "name": "element-upload", "version": "0.0.0", "description": "A upload component for Vue.js.", "keywords": [