Chore: retire lerna and remove redundant files (#11493)
* Chore: retire lerna and delete redundant files * Chore: update Makefile
This commit is contained in:
hetech
杨奕
parent
7df9a1e38c
commit
465dcf2a19
|
|
@ -50,7 +50,7 @@ npm run dist
|
|||
```
|
||||
|
||||
## Component Developing Guidelines
|
||||
- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file, cooking config, documentation and `package.json` are included.
|
||||
- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file and documentation are included.
|
||||
- Refer to `Button` for nested components.
|
||||
- Refer to `Select` for components that depend on other components.
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ npm run dist
|
|||
```
|
||||
|
||||
## Guía Para Desarrollo de Componentes
|
||||
- Corra el comando `make new <component-name>` para crear el directorio de su proyecto para un componente nuevo. Verifique su código fuente test, configuración para armar, documentación y `package.json` están incluidos.
|
||||
- Corra el comando `make new <component-name>` para crear el directorio de su proyecto para un componente nuevo. Verifique su código fuente test, archivo de entrada y documentación están incluidos.
|
||||
- Refiérase al `Button` para componentes anidados.
|
||||
- Refiérase al `Select` para componentes que dependen de otros componentes.
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ npm run dist
|
|||
```
|
||||
|
||||
## 组件开发规范
|
||||
- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
|
||||
- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、文档
|
||||
- 如果包含父子组件，需要更改目录结构，参考 `Button`
|
||||
- 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
|
||||
|
||||
|
|
|
|||
8
Makefile
8
Makefile
|
|
@ -26,18 +26,12 @@ new-lang:
|
|||
dist: install
|
||||
npm run dist
|
||||
|
||||
dist-all:
|
||||
npm run dist:all
|
||||
|
||||
deploy:
|
||||
@npm run deploy
|
||||
|
||||
pub:
|
||||
npm run pub
|
||||
|
||||
pub-all:
|
||||
npm run pub:all
|
||||
|
||||
test:
|
||||
npm run test:watch
|
||||
|
||||
|
|
@ -47,8 +41,6 @@ help:
|
|||
@echo " \033[35mmake new <component-name> [中文名]\033[0m\t--- 创建新组件 package. 例如 'make new button 按钮'"
|
||||
@echo " \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 开发模式"
|
||||
@echo " \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 编译项目，生成目标文件"
|
||||
@echo " \033[35mmake dist-all\033[0m\t\033[0m\t\033[0m\t--- 分别编译每个组件项目"
|
||||
@echo " \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 部署 demo"
|
||||
@echo " \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 发布到 npm 上"
|
||||
@echo " \033[35mmake pub-all\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 发布各组件到 npm 上"
|
||||
@echo " \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t--- 为网站添加新语言. 例如 'make new-lang fr'"
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const components = require('../../components.json');
|
||||
const execSync = require('child_process').execSync;
|
||||
const existsSync = require('fs').existsSync;
|
||||
const path = require('path');
|
||||
|
||||
let componentPaths = [];
|
||||
|
||||
delete components.index;
|
||||
delete components.font;
|
||||
|
||||
Object.keys(components).forEach(key => {
|
||||
const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);
|
||||
|
||||
if (existsSync(filePath)) {
|
||||
componentPaths.push(`packages/${key}/cooking.conf.js`);
|
||||
}
|
||||
});
|
||||
|
||||
const paths = componentPaths.join(',');
|
||||
const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`;
|
||||
|
||||
execSync(cli, {
|
||||
stdio: 'inherit'
|
||||
});
|
||||
|
|
@ -28,34 +28,6 @@ ${ComponentName}.install = function(Vue) {
|
|||
};
|
||||
|
||||
export default ${ComponentName};`
|
||||
},
|
||||
{
|
||||
filename: 'cooking.conf.js',
|
||||
content: `var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'El${ComponentName}'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
`
|
||||
},
|
||||
{
|
||||
filename: 'package.json',
|
||||
content: `{
|
||||
"name": "element-${componentname}",
|
||||
"version": "0.0.0",
|
||||
"description": "A ${componentname} component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/${componentname}",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}`
|
||||
},
|
||||
{
|
||||
filename: 'src/main.vue',
|
||||
|
|
|
|||
11
lerna.json
11
lerna.json
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"lerna": "2.0.0-beta.32",
|
||||
"version": "independent",
|
||||
"publishConfig": {
|
||||
"ignore": [
|
||||
"node_modules",
|
||||
"log.*"
|
||||
]
|
||||
},
|
||||
"packages": ["packages/carousel", "packages/table", "packages/upload", "packages/date-picker", "packages/loading", "packages/pagination"]
|
||||
}
|
||||
|
|
@ -16,17 +16,15 @@
|
|||
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:umd": "node build/bin/build-locale.js",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
|
||||
"deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
|
||||
"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
|
||||
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
|
||||
"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
|
||||
"dist:all": "node build/bin/build-all.js && npm run build:theme",
|
||||
"i18n": "node build/bin/i18n.js",
|
||||
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
|
||||
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
|
||||
"pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
|
||||
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
|
||||
},
|
||||
|
|
@ -109,7 +107,6 @@
|
|||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-webpack": "^3.0.0",
|
||||
"lerna": "^2.0.0-beta.32",
|
||||
"lolex": "^1.5.1",
|
||||
"markdown-it": "^6.1.1",
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import ElCarousel from './src/main';
|
||||
import ElCarouselItem from './src/item';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function(Vue) {
|
||||
Vue.component(ElCarousel.name, ElCarousel);
|
||||
Vue.component(ElCarouselItem.name, ElCarouselItem);
|
||||
};
|
||||
|
||||
export { ElCarousel, ElCarouselItem };
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElCarousel', '_index.js'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "element-carousel",
|
||||
"version": "2.0.0",
|
||||
"description": "A carousel component for Vue.js.",
|
||||
"main": "lib/index.js",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/carousel",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
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: 'ElCascader',
|
||||
extends: ['vue2'],
|
||||
alias: config.alias,
|
||||
externals: { vue: config.vue }
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "element-cascader",
|
||||
"version": "0.0.0",
|
||||
"description": "A cascader component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/cascader",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElColorPicker'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "element-color-picker",
|
||||
"version": "0.0.0",
|
||||
"description": "A color-picker component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/color-picker",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
# element-datepicker
|
||||
|
||||
|
||||
## Installation
|
||||
```shell
|
||||
npm i element-datepicker -S
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
A:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElDatePicker from 'element-datepicker'
|
||||
|
||||
Vue.use(ElDatePicker)
|
||||
```
|
||||
|
||||
B:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { DatePicker, TimePicker, TimeSelect } from 'element-datepicker'
|
||||
|
||||
Vue.component(DatePicker.name, DatePicker);
|
||||
Vue.component(TimePicker.name, TimePicker);
|
||||
Vue.component(TimeSelect.name, TimeSelect);
|
||||
```
|
||||
|
||||
C:
|
||||
```html
|
||||
<script src="path/to/vue/dist/vue.js"></script>
|
||||
<script src="path/to/el-datepicker/index.js"></script>
|
||||
<script>
|
||||
Vue.use(ElDatePicker);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | 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
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import DatePicker from './src/picker/date-picker';
|
||||
import TimePicker from './src/picker/time-picker';
|
||||
import TimeSelect from './src/picker/time-select';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function install(Vue) {
|
||||
Vue.component(DatePicker.name, DatePicker);
|
||||
Vue.component(TimePicker.name, TimePicker);
|
||||
Vue.component(TimeSelect.name, TimeSelect);
|
||||
};
|
||||
|
||||
export { DatePicker, TimePicker, TimeSelect };
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElDatePicker', '_index.js'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "element-datepicker",
|
||||
"version": "2.0.0",
|
||||
"description": "A datepicker component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/date-picker",
|
||||
"author": "long.zhang@ele.me",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
# 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-chalk/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)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElLoading'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "element-loading",
|
||||
"version": "2.0.0",
|
||||
"description": "A loading component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/loading",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
# 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-chalk/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)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElPagination'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "element-pagination",
|
||||
"version": "2.0.0",
|
||||
"description": "A pagination component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/pagination",
|
||||
"author": "qingwei-li<qingwei.li@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
# element-table
|
||||
> A element-table component for Vue.js.
|
||||
|
||||
## Demo
|
||||
http://element-component.github.io/element-table
|
||||
|
||||
## Installation
|
||||
```shell
|
||||
npm i element-table -D
|
||||
```
|
||||
|
||||
## Usage
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElTable from 'element-table'
|
||||
import 'element-theme-chalk'
|
||||
|
||||
Vue.use(ElTable)
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { ElTable } from 'element-table'
|
||||
import { ElTableColumn } from 'element-table'
|
||||
|
||||
Vue.component('el-table', ElTable)
|
||||
Vue.component('el-table-column', ElTableColumn)
|
||||
```
|
||||
|
||||
|
||||
### 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 | — | — |
|
||||
|
||||
### 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) | — | — |
|
||||
| sort-by | 对数据进行排序的时候按照 sort-by 排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 0 个排序，如果第 0 个相等，再按照第 1 个排序，以此类推。 | Function(row, index)/String/Array | — | — |
|
||||
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| formatter | 用来格式化内容 | Function(row, column) | — | — |
|
||||
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| 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
|
||||
make dev
|
||||
|
||||
## test
|
||||
make test
|
||||
|
||||
## build
|
||||
make build
|
||||
```
|
||||
|
||||
# License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import ElTableColumn from './src/table-column';
|
||||
import ElTable from './src/table';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function(Vue) {
|
||||
Vue.component(ElTable.name, ElTable);
|
||||
Vue.component(ElTableColumn.name, ElTableColumn);
|
||||
};
|
||||
|
||||
export { ElTable, ElTableColumn };
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElTable', '_index.js'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "element-table",
|
||||
"version": "2.2.2",
|
||||
"description": "A table component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/table",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
# 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-chalk/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-file-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)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var cooking = require('cooking');
|
||||
var gen = require('../../build/gen-single-config');
|
||||
|
||||
cooking.set(gen(__dirname, 'ElUpload'));
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"name": "element-upload",
|
||||
"version": "2.0.0",
|
||||
"description": "A upload component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/upload",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {}
|
||||
}
|
||||
Loading…
Reference in New Issue