ci-plus
v1.9.6
Published
ci组件库
Downloads
433
Readme
历史更新
1.9.6
1、优化uploadV4 uploadV5 uploadV6 组件中 默认取值bug
1.9.5
1、新增 ciuploadV6 组件,优化一些bug
1.9.4
1、优化表头筛选组件 headerInput.vue 中筛选条件的重置逻辑bug
1.9.3
1、优化uploadV5.vue组件添加必填标识
1.9.2
1、优化uploadV5.vue组件添加归属公司默认选中的orgname
1.9.1
1、优化uploadV5.vue组件
1.9.0
1、uploadV4.vue组件基础上,新增uploadV5.vue组件(新增功能:配置默认选中归属公司选项)
1.8.9
1、更新uploadV4.vue组件命名重复
2、优化一些其他bug
1.8.7
1、删除旧标识卡用到的两个函数导出
2、添加表头设置表单的翻译
1.8.6
1、修改 ciuploadV4 组件中的一个bug
1.8.5
1、新增 ciuploadV4 组件
2、一些导出小优化
1.8.4
1、优化弹窗组件,使其样式不污染全局
1.8.3
1、优化ci-select组件中使用名组件称问题
1.8.0
1、移除原来标识卡模板组件
1.7.9
1、导入组件3(uploadV3.vue)中增加中英文切换
1.7.8
1、导入组件3中优化单选文件的时候覆盖文件逻辑
1.7.7
1、新增导入组件3(可以选择归属公司)
1.7.6
1、调整语言文件中翻译对象
1.7.5
1、表头筛选组件新增语言切换功能
1.7.0
1、更新ajaxBox.ts函数的downFileFetchV3中文件名称匹配逻辑
1.6.9
1、微调标识卡模板到 1.6.0 版本:更新检验员检验日期检验结果取值逻辑,更新装配标识卡本批数量取值逻辑
1.6.8
1、微调标识卡模板到 1.5.9 版本:优化单重和净重字段判空逻辑
1.6.7
1、微调标识卡模板到 1.5.8 版本:删除产品标识卡和返工标识卡中的'采购单号'字段
1.6.6
1、标识卡模板更新到 1.5.7 版本
1.6.5
1、将1.2.0 版本中标识卡模板的'单重'和'净重'后面追加单位字段。
2、附件下载函数ajaxBox.ts中新增 downFileFetchV3 函数:不传递文件名称时使用后端返回文件名导出。
1.6.4
1、标识卡模板更新到1.5.6版本
1.6.3
1、更新第二版为尚标识卡模板- 客户名称字段取值安装本组件库 特别注意
# 本组件库是二次封装,所以依赖一些其他库,需要安装以下库:
"lodash": "^4.17.21", # 工具库
"less": "^4.2.0", # less库
"sortablejs": "^1.15.1", # 拖拽库
"vite-plugin-svg-icons": "^2.0.1", # svg图标库
"jsbarcode": "^3.11.6", # 条形码库
"vue-draggable-plus": "^0.4.0", # 拖拽库
"qrcode": "^1.5.3", #二维码库
"vue3-print-nb": "^0.1.4",
"vuedraggable": "^2.24.3",
"qrcode": "^1.5.3",
"@vueuse/core": "^9.13.0"# 1、安装组件
pnpm install ci-plus -S
# 2、安装element-plus 和引入
pnpm install [email protected] @element-plus/[email protected] -S
# 3、安装package.json中的其他依赖(到node_modules/ci-plus/package.json目录下,把里面的依赖安装)
# 4、main.ts引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CiPlus from 'ci-plus'
# 5、全局注册
app.use(ElementPlus)
app.use(CiPlus)
# 本地安装项目
pnpm install 项目package.json所在目录
pnpm install D:\UserData\Public\InternalUse\59529\zjk\ci-plus\packages\components
# 安装npm包
pnpm install ci-plus
# 本库依赖element-plus,需要安装element-plus 图标库
pnpm install [email protected] -S
pnpm install @element-plus/[email protected] -S
# 发布包
npm publish
如果用pnpm安装组件后出现组件中某个依赖报错说没有默认导出
# 清楚pnpm缓存,删除项目目录的node_modules文件夹
pnpm store prune
# 重新安装
pnpm install组件库使用说明
# 安装组件
pnpm install ci-plus -S
# 安装element-plus 和引入
pnpm install [email protected] @element-plus/[email protected] -Ssvg图标组件使用说明
1、首先需要安装插件
pnpm i [email protected] [email protected] -D
2、在src/assets/icons中创建svg文件夹,(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)
3、在main.ts中引入svg图标
import 'virtual:svg-icons-register'
4、在vite.config.ts中配置svg图标
import path from 'path'
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
createSvgIconsPlugin({
// 配置svg文件存放的文件夹,(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// clas命名规则
symbolId: 'icon-[dir]-[name]'
}
)
]
})6、在组件中使用svg图标
<template>
<div>
<!-- 单独引入 -->
<Svgicon icon-class="search" />
<!-- 全局引入:name就是svg文件的文件名 -->
<ci-svg-icon name="regular-left" size="20" color="#2C93FF" ></ci-svg-icon>
</div>
</template>
<script setup>
// 单独引入
import { Svgicon } from '@ci-plus/components'