# @tyslib/vue-components

> ```js //全局注册组件 import VueComponents, {UtilsStore, UtilsMsg, UtilsTools} from '@tyslib/vue-components' import "@tyslib/vue-components/style.css" app.use(VueComponents)

Latest version **1.2.1** (published 2024-05-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tyslib/vue-components
pnpm add @tyslib/vue-components
yarn add @tyslib/vue-components
bun add @tyslib/vue-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2024-05-21 |
| First published | 2023-07-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1021.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | anganhun |

## Links

- npm: https://www.npmjs.com/package/@tyslib/vue-components
- npm.io page: https://npm.io/package/@tyslib/vue-components

## Recent versions

- 1.2.1 (latest) — 2024-05-21
- 1.2.0 — 2024-05-13
- 1.1.28 — 2024-04-24
- 1.1.27 — 2024-04-16
- 1.1.26 — 2024-03-19
- 1.1.25 — 2024-02-23
- 1.1.24 — 2024-02-23
- 1.1.23 — 2024-01-12
- 1.1.22 — 2024-01-09
- 1.1.21 — 2023-12-29
- 1.1.20-4 — 2023-12-28
- 1.1.20-3 — 2023-12-28
- 1.1.20-2 — 2023-12-28
- 1.1.20-1 — 2023-12-28
- 1.1.20 — 2023-12-28
- … 93 more at https://npm.io/package/@tyslib/vue-components/versions

## README

#### 技术栈：vue3、vite4、pinia、element-plus
```js
//全局注册组件
import VueComponents, {UtilsStore, UtilsMsg, UtilsTools} from '@tyslib/vue-components'
import "@tyslib/vue-components/style.css"
app.use(VueComponents)

// 局部引入组件
import {CompTable, UtilsStore, UtilsMsg, UtilsTools} from '@tyslib/vue-components'

```

### 列表组件 comp-table

```html
<comp-table
  :loading="tableDataSet.loading"
  :column="tableDataSet.column"
  :list="tableDataSet.list"
  :paginate="tableDataSet.paginate"
  :operate="tableDataSet.operate"
  @paginate-change="onPaginateEvent"
  @operate="onOperateEvent">
  <template v-slot:photoUrl="{row}">
    <comp-file :list="[{url: row.photoUrl}]" :size="120"></comp-file>
  </template>
</comp-table>
```

#### 示例
![](./comp-table.png)

## comp-table 属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| list | 列表数据，必传 | `对象数组` | - | - | - |
| column | 列表表头，必传 | `对象数组` | - | - | - |
| operate | 列表操作按钮 | `对象数组` | `请看operate 属性说明` | - | - |
| paginate | 页码数据 | `对象数组` | `请看paginate 属性说明` | - | - |
| loading  | 加载状态 | `boolean` | - | - | - |
| isShowOperate  | 是否显示操作按钮 | `boolean` | - | - | - |
| isShowPaginate  | 是否显示页码 | `boolean` | - | - | - |
| isAutoHeight  | 是否自动高度 | `boolean` | - | - | - |
| isTextEllipsis  | 是否超出隐藏文字 | `boolean` | - | false | - |
| isShowCheckBox  | 是否显示批量勾选 | `boolean` | - | - | - |
| isReserveSelection  | 翻页是否保留勾选数据 | `boolean` | - | false | - |
| isShowCheckBoxBtn  | 是否显示批量操作按钮 | `boolean` | - | - | - |
| outerHeight  | 外部高度，用来计算表格展示高度 | `number` | - | - | - |
| batchOptions  | 批量操作按钮 | `对象数组` | `如：[{label: '批量删除',value:'delete'}]` | - | - |
| attrs | el-table组件所属属性 | `对象` | - | - | - |


### column 属性说明

| 参数 | 说明 | 
| ---  | --- |
| slot | 插槽，用来插入自定义展示内容，（slot、prop）二选一 | 
| prop | 展示的数据，（slot、prop）二选一 | 
| label | 表头名称 | 
| width | 数据列最小宽度 | 
| hide | 数据列隐藏规则 | 

### paginate 属性说明

| 参数 | 说明 | 
| ---  | --- |
| page | 页码 | 
| size | 大小 | 
| total | 总计 | 

### operate 属性说明

| 参数 | 说明 | 
| ---  | --- |
| label | 按钮名称 | 
| value | 按钮标识 | 
| type | 按钮类型  'primary、success、warning、danger、info'| 
| hide | 按钮隐藏规则，function、boolean，如：(row)=>row.status == 1| 

## comp-table 事件说明

| 事件名 | 说明                | 参数 |
| ------ | ------------------- | ---- |
| @operate  | 监听操作按钮点击 | -    |
| @paginate  | 监听页码事件，返回当前点击按钮、当前行数据与当前行索引 | -    |
| @batch-operation  | 监听批量操作按钮点击 | -    |
| @selection-change  | 监听批量选择 | -    |



### 列表搜索组件 comp-search

```html
<comp-search 
  v-model="searchDataSet.search" 
  v-model:list="searchDataSet.list" 
  :list="searchDataSet.list"
  :operate="searchDataSet.operate"
  @change="(e: any)=>onSearchEvent(e, 'change')"
  @click="(e: any)=>onSearchEvent(e, 'click')">
</comp-search>
```

#### 示例
![](./comp-search.png)

#### 参数
```
size：尺寸 | string | 'large、default、small'
search：搜索值 | 对象 | 必须 | 默认空对象{}
list：搜索操作项 | 对象 | 必须 | 如下
  status: { // 搜索项参数
    label: '状态', // 搜索项名称
    type: 'select',// 搜索项类型 | 'input、select、cascader、date、datetimerange'
    value: '', // 搜索项默认值
    list: [ // 搜索项下拉数据，只有type为select、cascader时才有
      {
        label: '全部',
        value: ''
      },
      {
        label: '配置中',
        value: '0'
      },
      {
        label: '已发布',
        value: '1'
      }
    ],
    hide: (search) => search.status == 1, // 搜索项隐藏规则 | function、boolean | 默认不隐藏
    attrs: {}, // element组件属性
    isSlot: false, //是否插槽
  },
operate：表格操作按钮 | 对象数组 | 如下
  [
    {
      label: 按钮名称,
      value: 按钮标识,
      type: 按钮类型 | 'primary、success、warning、danger、info',
      hide: 按钮隐藏规则 | function、boolean | 默认不隐藏，如：({search, btn}) => search.status == 1
    },
  ]
attrs：el-table组件所属属性 | 对象 | 如下，驼峰命名
  {
    size: 'default',
    rowKey: 'id',
    defaultExpandAll: false,
    lazy: true,
    treeProps: { children: 'children', hasChildren: 'hasChildren' },
    headerCellClassName: "table-header",
  }
isShowBackBtn：是否显示返回按钮 | boolean
backTitle：返回按钮名称 | boolean
title：上一级名称 | boolean

方法
@change：监听element组件chang事件，返回值：{e：当前搜索项的值, key: 当前chang的搜索项}
@operate：监听操作按钮点击，返回值：{btn：当前点击按钮, search: 搜索值}
```



### 列表组件 comp-popup

```html
<comp-popup 
  v-model="isShow"
  title="新增" 
  width="600px">
  <div></div>
</comp-popup>
```

#### 示例
![](./comp-popup.png)

#### 参数
```
v-model: 控制弹窗显示隐藏
title：标题 | string
width：弹窗宽度 | string | 默认800px
width：弹窗高度 | string 
footerBtn： | 对象数组 | 有默认值 | 如下
  [
    {
      type: 'submit', // 按钮表示
      label: '提交', // 按钮名称
      bgColor: '', // 按钮背景
      attrs: '', // 按钮自定义属性
    }
  ]
isShowFooterBtn：是否显示弹窗按钮
isHidePopup：是否隐藏弹窗


```

### 表单组件 comp-form

```html
<comp-form  
  v-model="formDataSet.form" 
  v-model:list="formDataSet.list" 
  :list="formDataSet.list" 
  :originData="data" 
  :submitFun="handleSubmit">
  <template v-slot:photoUrl="{data}">
    <comp-upload-oss 
      :config="uploadConfig" 
      @upload="onUploadEvent" 
      :fileList="[{url: data}]">
    </comp-upload-oss>
  </template>
</comp-form>
```

#### 示例
![](./comp-form.png)

#### comp-form 属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| v-model | 监听表单数据 | object | - | - | - |
| v-model:list / list | 监听表单数据项，必填 | object | - | - | - |
| submitFun | 表单提交回调，必填 | function | 函数需抛出return，return true表示提交正常并关闭弹窗，return false表示提交异常不关闭弹窗 | - | - |
| originData | 需要回显的数据 | object | - | - | - |
| attrs | el-form组件所属属性 | object | {size: 'large',labelWidth: '120px'} | - | - |

```
formData：{
  parentId: { // 数据项，以参数作为key
    label: '上级',
    value: '',
    type: 'select',cascader、select、datetime、datetimerange、switch、checkbox、radio'
    hide: (e) => e.status == 1, // 数据项隐藏规则 | function、boolean | 默认不隐藏,
    required: true,
    rule: [{}],
    attrs: { // 数据项element组件属性
      disabled: true
    },
    list: [],
    isSlot: false,
  }
} // 详细见 "数据项属性说明"

```

#### comp-form 数据项属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| label | 数据项名称，必填 | string | - | - | - |
| value | 数据项名称，必填 | string | array | - | - | - |
| type | 数据项类型，必填 | string | 'input、textarea、cascader、select、datetime、datetimerange、switch、checkbox、radio' | - | - |
| hide | 是否隐藏数据项，可选，默认不隐藏 | function、boolean | (e) => e.status == 1，e为当前数据项集合 | - | - |
| required  | 数据项是否必选，可选 | boolean | - | - | - |
| rule  | 数据项校验规则 | 对象数组 | - | - | - |
| list  | 数据项下拉数据 | array | - | - | - |
| isSlot  | 是否通过插槽插入自定义内容 | boolean | - | - | - |
| attrs  | 数据项对应的element组件属性，以及需要自定义的样式style | object | - | - | - |


#### comp-form 事件说明

| 事件名 | 说明                | 返回值 |
| ------ | ------------------- | ---- |
| @change  | 监听数据项的变化 | {e：chang值, key：chang的数据项key}    |
| @btn-click  | 按钮的标识 | -    |

### 列表组件 comp-upload-oss

```html
<comp-upload-oss :config="uploadConfig" @upload="onUploadEvent" :fileList="[{url: data}]"></comp-upload-oss>
```

#### 示例
![](./img/comp-upload-oss.png)

#### 参数
```
uploadConfig：文件上传配置 | 对象 | 必须 | 如下
  {
    httpUrl: '/api/uploadUrl', // 获取oss存储信息接口地址 | 必须
    fileDir: `目录1/目录2`, // oss文件存储路径 | 必须
    fileType: '.png', // 上传文件类型限制，默认不限制，可选择所有类型文件
    isShowFile: true, // 是否显示文件列表
    isShowDelete: true, // 是否显示删除按钮
    isMultiple: false, //是否多选
    isReplaceFile: false, //是否替换文件
    isOnlySelectFile: false, //是否仅选择文件，不上传oss
    size: 150, // 上传框大小
    uploadText: 150, // 上传文案
    serviceType: 7, // 服务类型
    fileNameType: 'file_stamp', //文件名称命名方式， ['file', 'file_stamp', 'stamp']
    limitCount: 7, // 文件上传数量限制，默认不限制
    notice: '（ 建议规格：168*168像素，png格式，透明底，500KB以内 ）' //上传提示
  }
fileList：文件回显列表 | 对象数组 | 如：[{url: 'xxx'}]

方法
@upload：文件上传回调， 返回值：文件列表
@delete：文件删除回调， 返回值：文件列表
@files-selected：选择的文件， 返回值：文件列表
```

### 文件列表组件 comp-file

```html
<comp-file :list="[{url: row.photoUrl}]" :size="70"></comp-file>
```

#### 示例
![](./comp-file.png)

#### 参数
```
list：文件列表 | 对象数组 | 如 [{url: 'xxx', fileName: 'xxx'}]， 支持展示图片、视频、文档
size：大小 | number
```


### js封装库



### 接口请求组件 UtilsHttp

```js
import {UtilsHttp} from '@tyslib/vue-components'
export default function Http(domain: string = 'baseUrl') {
  return UtilsHttp(domainMap[domain], {
    isSign: true, // 是否启用签名
    timeout: 1000 * 60 * 20, // 超时时间
    headers: () => { // 请求头设置
      return {
        tenantId: '',
        authorization: '',
        menuId: '',
      }
    },
    responseFun: () => {}, // 响应成功处理自定义方法
    responseErrFun: () => {},// 响应失败处理自定义方法
  })
}

// 使用
const ApiCommon = {
  // 用户登录
  postLogin: (p={}) => Http().post(`/login`, {params: p})
}
```

#### 参数
```
domain：域名 | string | 非必传 
headerConfig：请求头配置 | object

```
#### headerConfig配置
```
  headers?: Function
  responseFun?: Function
  responseErrFun?: Function
  timeout?: number
  isSign?: boolean

```

#### 支持方法
```
get：get请求
downloadFile：get文件下载
post：post请求
postFormData：post formData 请求
postFiles：post 文件上传请求
downloadFilePostFormData：post form文件下载
downloadFilePost：post json文件下载
delete：delete 请求
deleteFormData：delete formData 请求
put：put 请求
putFormData：put formData 请求
```

#### 



### 接口请求组件 UtilsHttp

```js
import {UtilsMsg} from '@tyslib/vue-components'

// 使用
UtilsMsg.success('提示信息')
```

#### 参数
``` js
//有 info、success、warning、error
传递参数：
UtilsMsg.success('提示信息', '显示时长（毫秒，默认3000ms）')

UtilsMsg.confirm('提示内容', '提示标题', '确定按钮文案', '取消按钮文案')

UtilsMsg.prompt('需要校验的内容', {
  title: '提示标题',
  notice: '提示内容',
  inputErrorMessage: '校验失败提示信息',
  confirmButtonText: '确定按钮文案',
  cancelButtonText: '取消按钮文案',
})
```

### 富文本组件 comp-editor

```html
<comp-editor 
  v-model="editorDataSet.editorData" 
  :isReadOnly="false">
</comp-editor>
```


#### comp-editor 属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| v-model | 富文本数据，必传 | string | - | - | - |
| isReadOnly | 是否只读 | boolean | - | - | - |
| uploadConfig | 图片上传配置 | object | `请看 uploadConfig 属性说明` | - | - |

#### uploadConfig 属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| httpUrl | 文件上传地址，必传 | string | - | - | - |
| fileDir | 文件路径，必传 | string | - | - | - |
| isReplaceFile | 是否替换文件 | boolean | - | - | - |
| serviceType | 服务类型 | string | - | - | - |

---
_Source: https://npm.io/package/@tyslib/vue-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._