Commit 9f5c08e6 authored by cinwell.li's avatar cinwell.li Committed by 杨奕

Clean packages (#2345)

parent fc920fe7
...@@ -32,23 +32,12 @@ export default ${ComponentName};` ...@@ -32,23 +32,12 @@ export default ${ComponentName};`
{ {
filename: 'cooking.conf.js', filename: 'cooking.conf.js',
content: `var cooking = require('cooking'); content: `var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'El${ComponentName}'));
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'El${ComponentName}',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();` module.exports = cooking.resolve();
`
}, },
{ {
filename: 'package.json', filename: 'package.json',
......
var path = require('path');
var config = require('./config');
module.exports = function (context, moduleName, entry) {
return {
entry: {
index: path.resolve(context, entry || 'index.js')
},
dist: path.resolve(context, 'lib'),
template: false,
format: 'umd',
moduleName: moduleName,
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElAlert',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-alert",
"version": "1.0.0",
"description": "A alert component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/alert",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElAutocomplete',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-autocomplete",
"version": "1.0.0",
"description": "A autocomplete component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/autocomplete",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElBadge',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-badge",
"version": "0.0.0",
"description": "A badge component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/badge",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# 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)
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
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElBreadcrumb',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-breadcrumb",
"version": "1.0.0",
"description": "A breadcrumb component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/breadcrumb",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# 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)
import ElButton from './src/button';
import ElButtonGroup from './src/button-group';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElButton.name, ElButton);
Vue.component(ElButtonGroup.name, ElButtonGroup);
};
export {
ElButton,
ElButtonGroup
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElButton',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-button",
"version": "1.0.0",
"description": "A button component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/button",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCard',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-card",
"version": "1.0.0",
"description": "A card component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/card",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElCarousel', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCarousel',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# element-checkbox
> A element-checkbox component for Vue.js.
## Demo
http://element-component.github.io/element-checkbox
## Installation
```shell
npm i element-checkbox -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCheckbox from 'element-checkbox'
import 'element-theme-default/dist/checkbox.css'
Vue.use(ElCheckbox)
```
or
```javascript
import Vue from 'vue'
import { ElCheckbox } from 'element-checkbox'
import { ElCheckboxGroup } from 'element-checkbox'
Vue.component('el-checkbox', ElCheckbox)
Vue.component('el-checkbox-group', ElCheckboxGroup)
```
### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| 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
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElCheckbox from './src/checkbox';
import ElCheckboxGroup from './src/checkbox-group.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElCheckboxGroup.name, ElCheckboxGroup);
Vue.component(ElCheckbox.name, ElCheckbox);
};
export {
ElCheckbox,
ElCheckboxGroup
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCheckbox',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-checkbox",
"version": "1.0.2",
"description": "A checkbox component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/checkbox",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCol',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-col",
"version": "1.0.0",
"description": "A row component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/col",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
import ElCollapse from './src/collapse';
import ElCollapseItem from './src/collapse-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElCollapseItem.name, ElCollapseItem);
Vue.component(ElCollapse.name, ElCollapse);
};
export {
ElCollapse,
ElCollapseItem
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCollapse',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-collapse",
"version": "1.0.0",
"description": "A row component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/collapse",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElDatePicker', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDatePicker',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# element-dialog
> A element-dialog component for Vue.js.
## Demo
http://element-component.github.io/element-dialog
## Installation
```shell
npm i element-dialog -D
```
## Usage
```javascript
import Vue from 'vue'
import ElDialog from 'element-dialog'
import 'element-theme-default'
Vue.use(ElDialog)
```
or
```javascript
import Vue from 'vue'
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 |
### Slot
| name | 说明 |
|------|--------|
| — | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
### 方法
每个 `el-dialog` 实例都暴露了如下方法,用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例:
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | Dialog 关闭的回调 | — |
| open | Dialog 打开的回调 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDialog',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-dialog",
"version": "1.0.0",
"description": "A dialog component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/dialog",
"author": "elemefe",
"license": "MIT",
"devDependencies": {
}
}
# 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)
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
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDropdown',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-dropdown",
"version": "1.0.0",
"description": "A dropdown component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/dropdown",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# 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)
import ElFormItem from './src/form-item';
import ElForm from './src/form';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElForm.name, ElForm);
Vue.component(ElFormItem.name, ElFormItem);
};
export { ElForm, ElFormItem };
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElForm',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-form",
"version": "1.0.0",
"description": "A form component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/form",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
"async-validator": "^1.6.6"
}
}
## element-input-number
> A element-input-number component for Vue.js.
## Demo
http://element-component.github.io/element-input-number
## Installation
```shell
npm i element-input-number -D
```
## Usage
```javascript
import Vue from 'vue'
import ElInputNumber from 'element-input-number'
import 'element-theme-default/dist/input-number.css'
Vue.use(ElInputNumber)
```
or
```javascript
import Vue from 'vue'
import ElInputNumber from 'element-input-number'
Vue.component('el-input-number', ElInputNumber)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------|-------------- |----------|-------------------------------- |-------- |
| value | 绑定值 | number | — | — |
| min | 设置计数器允许的最小值 | number | — | 0 |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 绑定值被改变时触发 | 最后变更的值 |
## Development
```shell
make dev
## test
make test
## build
make build
```
## License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElInputNumber',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-input-number",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"input"
],
"author": "haipingZeng <haiping.zeng@ele.me>",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/input-number",
"dependencies": {
}
}
# element-input
> A element-input component for Vue.js.
# Demo
http://element-component.github.io/element-input
# Installation
```shell
npm i element-input -D
```
# Usage
```javascript
import Vue from 'vue'
import ElInput from 'element-input'
import 'element-theme-default/dist/input.css'
Vue.use(ElInput)
```
or
```javascript
import Vue from 'vue'
import ElInput from 'element-input'
Vue.component('el-input', ElInput)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| 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
make dev
# test
make test
# build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElInput',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-input",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"input"
],
"author": "haiping.zeng <haiping.zeng@ele.me>",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/input",
"devDependencies": {
}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElLoading'));
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElLoading',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# 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)
import ElMenu from './src/menu';
import ElMenuItem from './src/menu-item';
import ElMenuItemGroup from './src/menu-item-group';
import ElSubmenu from './src/submenu';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElMenuItem.name, ElMenuItem);
Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);
Vue.component(ElMenu.name, ElMenu);
Vue.component(ElSubmenu.name, ElSubmenu);
};
export {
ElMenuItemGroup,
ElMenuItem,
ElMenu,
ElSubmenu
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMenu',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-menu",
"version": "1.0.0",
"description": "A menu component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/menu",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMessageBox',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-message-box",
"version": "0.0.0",
"description": "A message-box component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/message-box",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMessage',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-message",
"version": "0.0.0",
"description": "A message component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/message",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElNotification',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-notification",
"version": "0.0.0",
"description": "A notification component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/notification",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElPagination'));
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElPagination',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElPopover',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-popover",
"version": "0.0.0",
"description": "A popover component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/popover",
"author": "elemefe",
"license": "MIT",
"devDependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElProgress',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-progress",
"version": "1.0.1",
"description": "A progress component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"progress"
],
"author": "haiping.zeng <haiping.zeng@ele.me>",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/progress",
"devDependencies": {
}
}
# element-radio
> A element-radio component for Vue.js.
## Demo
http://element-component.github.io/element-radio
## Installation
```shell
npm i element-radio -D
```
## Usage
```javascript
import Vue from 'vue'
import ElRadio from 'element-radio'
import 'element-theme-default/dist/radio.css'
Vue.use(ElRadio)
```
or
```javascript
import Vue from 'vue'
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)
```
## Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| 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
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import Radio from './src/radio';
import RadioButton from './src/radio-button.vue';
import RadioGroup from './src/radio-group.vue';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(Radio.name, Radio);
Vue.component(RadioButton.name, RadioButton);
Vue.component(RadioGroup.name, RadioGroup);
};
export { Radio, RadioButton, RadioGroup };
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElRadio',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-radio",
"version": "1.0.0",
"description": "A radio component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/radio",
"author": "qingwei-li<qingwei.li@ele.me>",
"license": "MIT",
"dependencies": {}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElRate',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-rate",
"version": "0.0.0",
"description": "A rate component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/rate",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElRow',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-row",
"version": "1.0.2",
"description": "A row component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/row",
"author": "qingwei-li<qingwei.li@ele.me>",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElSelect', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElSelect',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# 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)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElSlider',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-slider",
"version": "0.0.0",
"description": "A slider component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/slider",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElSpinner',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "el-spinner",
"version": "1.0.0",
"description": "A input component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"input"
],
"author": "haiping.zeng@ele.me",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/spinner",
"devDependencies": {
}
}
import ElSteps from './src/steps';
import ElStep from './src/step';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElSteps.name, ElSteps);
Vue.component(ElStep.name, ElStep);
};
export { ElStep, ElSteps };
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElSteps',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-steps",
"version": "0.0.0",
"description": "A steps component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/steps",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# element-switch
> A element-switch component for Vue.js.
## Installation
```shell
npm i element-switch -D
```
## Usage
```javascript
import Vue from 'vue'
import ElSwitch from 'element-switch'
import 'element-theme-default'
Vue.use(ElSwitch)
```
or
```javascript
import Vue from 'vue'
import ElSwitch from 'element-switch'
Vue.component('el-switch', ElSwitch)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| 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 | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElSwitch',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-switch",
"version": "1.0.0",
"description": "A switch component for vue.js",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/switch",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElTable', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElTable',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
# 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)
import ElTabs from './src/tabs';
import ElTabPane from './src/tab-pane';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElTabs.name, ElTabs);
Vue.component(ElTabPane.name, ElTabPane);
};
export { ElTabs, ElTabPane };
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElTabs',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-tabs",
"version": "1.0.0",
"description": "A tabs component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/tabs",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# 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)
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment