qianyi-assembly

v1.2.7

Published

3 years ago

千易组件

0High
0Medium
0Low

gx2530047598

qianyi

千易组件库(基于Element-plus 得Vue3组件库)

更新内容

1.2.7(2023-08-29):
1.描述列表组件新增了fontSize属性,设置默认内容文字大小，对插槽内容不起作用 2.描述列表组件新增了titleSize属性,设置标题文字大小

1.2.2(2023-08-29):
1.文件上传组件新增了isUpload属性,值为false时不能进行上传操作，并且上传按钮区域也会隐藏.
2.图片item添加了灰色背景色，防止有些纯色图片在特定背景色下看不清。

1.2.1(2023-08-17):
1.新增了文件上传组件与文件预览组件

联系方式

QQ：2530047598

安装

安装

npm i qianyi-assembly --save

在main.js中引入

import qianyiAssembly from 'qianyi-assembly'
import 'qianyi-assembly/style.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(qianyiAssembly)
app.mount('#app')

以上代码便完成了组件的引入。需要注意的是，样式文件需要单独引入。

组件展示

Minion

组件列表

文字溢出：<qy-more></qy-more> 该组件主要用来处理文本信息过多得情况，可以让溢出文字以省略号截断，需要注意得是，组件得溢出宽度是根据父元素最大宽度决定得
基础参数
| 参数 | 说明 | 类型 |默认值| | :----: | :----: | :----: | :----: | | text | 文字内容 | string | — | | color | 文字内容颜色 | string | — | | isHtml | 内容是否为HTML格式 | boolean | false | | lineClamp | 溢出文字展示行数 | Number | 2 | | retractLabel | 收起文字 | string | 收起 | | retractLabelColor | 收起文字颜色 | string | #0073d9 | | allLabel | 查看全部文字 | string | 查看全部 | | allLabelColor | 查看全部文字颜色 | string | #0073d9 | | fontSize | 内容文字大小(单位px) | string,number | 18 | | controlSize | 控制点击文字大小 | string,number | 18 | | className | 组件class名 | string | — | | isControl | 是否需要控制按钮 | boolean | true |
描述列表：<qy-descriptions></qy-descriptions> 该组件主要是简化了Element Plus描述组件的使用方式，展示直接传入list数据，不需要再写HTML也支持自定义内容slot，并且添加了文字溢出的处理组件
基础参数
| 参数 | 说明 | 类型 |默认值| | :----: | :----: | :----: | :----: | | list | 数据列表 | array | [] | | fontSize | 文字内容大小px | string/number | 18 | | titleSize | 标题字体大小px | string/number | 25 | | column | 一行内得列数 | number | 1 | | title | 左上角标题 | string | —| | size | 组件尺寸(large/default/small) | string | large|
list-item配置参数
| 参数 | 说明 | 类型 |默认值| | :----: | :----: | :----: | :----: | | name | 标签文本 | string | — | | value | 展示内容 | string | —| | field | 字段名称(插槽使用) | string | large| | isMore | 是否使用文字溢出组件 | boolean | false |
提示
当isMore为true时,可以在list-item中传入文字溢出组件得基础参数当传入field参数时，可用使用插槽来自定义内容
```
 <template #file="{ param }">
     <span>{{param.value}}</span>
 </template>
```
上面得file就是field传入得值，param是list-item对象
文件上传：<qy-upload></qy-upload> 因为Element Plus的上传组件太臃肿了，自己重新写了个上传组件，该组件支持文件上传，在线预览，下载，文件展示，图片展示
基础参数
| 参数 | 说明 | 类型 |默认值| | :----: | :----: | :----: | :----: | | btnText | 上传按钮文字 | string | 上传附件 | | multiple | 是否支持文件多选 | boolean | true | | headers | 设置上传的请求头部 | object | —| | fileAction | 文件地址(https://xx.xx.xx.xx) | string |— | | action | 上传的地址 | string | —| | v-model | 上传的文件列表(对象参数) | array | []| | uploadHttp | 自定义上传方法 | function | —| | uploadBefore | 上传文件之前执行，可用于文件校验(返回值为true时才能继续上传) | function | —| | loading | 上传限制，为true时不能上传 | boolean | false| | imgType | 上传的图片类型(传入值后，图片和文件会分开展示[png, jpg, gif]) | array | []| | isUpload | 是否上传(false时只会展示文件，不能进行上传操作) | boolean | true |
监听方法
```
@uploadSuccess
@uploadErr
```
| 方法名 | 说明 | | :----: | :----: | | uploadSuccess | 上传成功后触发 | | uploadErr | 上传失败后触发 |
Slot | name | 说明 | | :----: | :----: | | uploadBtn | 上传区域内容 |
文件列表对象参数
```
[
    {
        type:'pdf',
        original:'测试文件.pdf',
        url:'/xx/xxx/xx.pdf'
        id:1
    }
]
```
| 参数 | 说明 | 类型 | | :----: | :----: | :----: | | type | 必填，文件类型(pdf,gif) | string | | original | 必填，文件名称 | string | | url | 必填，文件路径(/xx/xx.pjg) | string | | id | 必填，文件id | string/number |
提示
当传入自定义上传方法uploadHttp时,不会触发uploadSuccess方法，并且action也不用传入了。
文件预览：<qy-pdf></qy-pdf> 该组件主要用于文件预览，支持pdf，图片，视频
基础参数
| 参数 | 说明 | 类型 |默认值| | :----: | :----: | :----: | :----: | | type | 必填，文件类型(jpg) | string | — | | pdfUrl | 文件地址(http:xx.xx.xx/xx/xx) | string | — |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

千易组件库(基于Element-plus 得Vue3组件库)

更新内容

联系方式

安装

组件展示

组件列表