qianyi-assembly v1.2.7

千易组件库(基于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')

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

组件展示

组件列表

1. 文字溢出：<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

2. 描述列表：<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对象

3. 文件上传：<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也不用传入了。

4. 文件预览：<qy-pdf></qy-pdf> 该组件主要用于文件预览，支持pdf，图片，视频

   基础参数

   参数	说明	类型	默认值
   type	必填，文件类型(jpg)	string	—
   pdfUrl	文件地址(http:xx.xx.xx/xx/xx)	string	—