components-extent - npm explorer

![npm version](https://www.npmjs.com/package/components-extent)

全局安装

js
import componentsExtent from 'components-extent';
app.use({option}, componentsExtent);


推荐components-extent引入放在main.js最上方，否则extend.js方法异常
$3

uploadFunction：上传文件的方法，返回格式为 {hash: filePath}
fileHashFunction：验证文件md5方法, 返回格式为 {hash: filePath}
axiosInstance：axios请求工具对象
按需引入

请查看 index.js文件

$3

element-ui 相关的组件需要单独注册

js
import ElementExtent from 'components-extent/element/index.js';
app.use(ElementExtent);

$3

js
import {ElTableExt} from 'components-extent';
ElTableExt.setApi(Api); // 必须设置API，或者在data中设置api属性
mixins: [ElTableExt]


默认自动获取表格数据(调用api中的page方法)，可以设置autoInit: false关闭

html

    
      
        
          名称
          
        

      

      
        搜索/刷新
      

    

          :default-sort="defaultOrder"
      v-loading="table.loading"
      class="h-table"
      border
      @sort-change="defaultSortMethod"
      @select="handerSelect">

`$3`

js
import {ElFormExt} from 'components-extent';
mixins: [ElFormExt]


提供监听表单数据修改功能
$3

js
let menus = [
  {
    name: '菜单',
    params: 123
    click: function(params, ...args){
    }
  }
]
import {contextmenu} from 'components-extent';
contextmenu.handerContextmenu(event, menus, 'aaa');


$3

提供上传和文件路径处理, 需要先设置 uploadFunction 和 fileHashFunction 方法
设置方式一、全局引入时设置
方式二、

js
import {extentContext} from 'components-extent';
extentContext().uploadFunction = function(){}


方式三、
调用时传入
import {FileUtil} from 'components-extent';
FileUtil.upload(file, {uploadFunction: Function});
##### file 可以是InputHTMLEleement, File, Blob, Array
$3

js
import {emitter} from 'components-extent';

emitter.post('xxx', 123); emitter.on('xxx', Function);`

`$3`


模板API封装了通用的Api方法
$3

超大文件上传，上传步骤：
1. 初始化
2. 计算总任务数
3. 分片
4. 请求开启分片上传任务
5. 依次上传分片
6. 请求合并分片
7. 获取结果

* 用法`js import {MaxFileUploader} from 'components-extent'; let uploder = new MaxFileUploader({ url: 'xxx', md5Url: new URL('./md5.js', location), params: {}, axios });

uploader.progress((params, status, count, total, message) => { // 进度 })

uploader.then((params, res) => { // 上传完成 })

uploader.finally((params) => { // 最终调用 })

uploader.reserve((param)=>{ // 不满足分片规则时调用 })

// 销毁 uploder.destroy()`

* 构造函数参数：config`json { // 每个分片大小，单位字节，默认20M chunkSize: 20971520, // 设置文件最小多大才开始分割，单位字节，默认100M thresholdSize: 104857600, // 上传时并发数，默认10个 concurrency: 10, // 基础的url，非空,接口必须准守规则 url: null, // 开启分片上传任务请求配置 startRequest: { method: 'POST', headers: { 'Content-Type': 'application/json', }, }, // 上传分片文件请求配置 uploadRequest: { method: 'PUT', },

// 获取结果请求配置 resultRequest: { method: 'GET', },

// 开始合并请求配置 mergeRequest: { method: 'GET', },

// MD5的url，用于计算分片的hash值，类型必须是URL md5Url: null,

// 是否自动关闭线城池 autoCloseThreadPool: true, // 线程池，默认自动创建 threadPool: null }`

`$3`


重试工具
* 用法

js
import {utils} from 'components-extent';
utils.retry(function(){
  // 业务代码
}, {maxCount: 100});

`* 方法参数`retry(fn, options) fn {Funtion} 执行方法 options {Object} 配置 maxCount: Number, // 最大重试次数，默认3次 exceptionOut: 出现异常退出，默认false interval: 间隔多久一次`

`$3`


js线城池

* 参数 * 构造参数config`json // 线城池大小默认4个 coreSize: 4`

* init和submit`js submit(fn, ...args) fn {Function} 执行的方法，如果调用submit，方法中必须调用postMessage方法，参数为对象success和args args {...Any} 方法需要的参数`

* 用法`js import {ThreadPool} from 'components-extent'; let threadPool = new ThreadPool(config) // 初始化 threadPool.init((args1, args2)=>{ // 初始化代码 }, args1, args2)

// 提交任务 threadPool.submit((args1, args2)=>{ // 执行代码 // 执行完成需要调用 postMessage({ success: true, args: {} }) }, args1, args2).then(res => { // 执行成功后 })

// 销毁 threadPool.destroy()

![npm version](https://www.npmjs.com/package/components-extent)

全局安装

js
import componentsExtent from 'components-extent';
app.use({option}, componentsExtent);


推荐components-extent引入放在main.js最上方，否则extend.js方法异常
$3

uploadFunction：上传文件的方法，返回格式为 {hash: filePath}
fileHashFunction：验证文件md5方法, 返回格式为 {hash: filePath}
axiosInstance：axios请求工具对象
按需引入

请查看 index.js文件

$3

element-ui 相关的组件需要单独注册

js
import ElementExtent from 'components-extent/element/index.js';
app.use(ElementExtent);

$3

js
import {ElTableExt} from 'components-extent';
ElTableExt.setApi(Api); // 必须设置API，或者在data中设置api属性
mixins: [ElTableExt]


默认自动获取表格数据(调用api中的page方法)，可以设置autoInit: false关闭

html

    
      
        
          名称
          
        

      

      
        搜索/刷新
      

    

          :default-sort="defaultOrder"
      v-loading="table.loading"
      class="h-table"
      border
      @sort-change="defaultSortMethod"
      @select="handerSelect">

`$3`

js
import {ElFormExt} from 'components-extent';
mixins: [ElFormExt]


提供监听表单数据修改功能
$3

js
let menus = [
  {
    name: '菜单',
    params: 123
    click: function(params, ...args){
    }
  }
]
import {contextmenu} from 'components-extent';
contextmenu.handerContextmenu(event, menus, 'aaa');


$3

提供上传和文件路径处理, 需要先设置 uploadFunction 和 fileHashFunction 方法
设置方式一、全局引入时设置
方式二、

js
import {extentContext} from 'components-extent';
extentContext().uploadFunction = function(){}


方式三、
调用时传入
import {FileUtil} from 'components-extent';
FileUtil.upload(file, {uploadFunction: Function});
##### file 可以是InputHTMLEleement, File, Blob, Array
$3

js
import {emitter} from 'components-extent';

emitter.post('xxx', 123); emitter.on('xxx', Function);`

`$3`


模板API封装了通用的Api方法
$3

超大文件上传，上传步骤：
1. 初始化
2. 计算总任务数
3. 分片
4. 请求开启分片上传任务
5. 依次上传分片
6. 请求合并分片
7. 获取结果

* 用法`js import {MaxFileUploader} from 'components-extent'; let uploder = new MaxFileUploader({ url: 'xxx', md5Url: new URL('./md5.js', location), params: {}, axios });

uploader.progress((params, status, count, total, message) => { // 进度 })

uploader.then((params, res) => { // 上传完成 })

uploader.finally((params) => { // 最终调用 })

uploader.reserve((param)=>{ // 不满足分片规则时调用 })

// 销毁 uploder.destroy()`

// 获取结果请求配置 resultRequest: { method: 'GET', },

// 开始合并请求配置 mergeRequest: { method: 'GET', },

// MD5的url，用于计算分片的hash值，类型必须是URL md5Url: null,

// 是否自动关闭线城池 autoCloseThreadPool: true, // 线程池，默认自动创建 threadPool: null }`

`$3`


重试工具
* 用法

js
import {utils} from 'components-extent';
utils.retry(function(){
  // 业务代码
}, {maxCount: 100});

`$3`


js线城池

* 参数 * 构造参数config`json // 线城池大小默认4个 coreSize: 4`

* 用法`js import {ThreadPool} from 'components-extent'; let threadPool = new ThreadPool(config) // 初始化 threadPool.init((args1, args2)=>{ // 初始化代码 }, args1, args2)

// 提交任务 threadPool.submit((args1, args2)=>{ // 执行代码 // 执行完成需要调用 postMessage({ success: true, args: {} }) }, args1, args2).then(res => { // 执行成功后 })

// 销毁 threadPool.destroy()