组件下载

npm i vue3-img-tool

全局使用方法

在vue3项目中全局引用的方式

//main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import Vue3ImgTool from 'vue3-img-tool';
import './assets/iconfont/iconfont.css'  //将iconfont图标文件夹放进asset文件夹
import 'vue3-img-tool/lib/style.css';

const app = createApp(App);

app.use(Vue3ImgTool);
app.mount('#app');

如果使用ts+vite的方式，需要在env.d.ts中加入最后一句声明，否则ts会检测报错。

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module 'vue3-img-tool';

组件内使用

<script setup></script>

<template>
	<img-tool />
</template>

<style></style>

参数说明

| 属性 | 类型 | 默认值 |备注 | | ---- | ---- | ---- | ---- | | fetchInfo | Object | {sysId:'',busiId:'',roleId: '',fetchNo:'',mark:''}, | 影像初始化 mark 1批次维度 2客户视图 3客户档案 | idCardInfo | Object | {idCardType: "", idCardNo: ""} | idCardType--证件类型 idCardNo--证件号码 | PINInfo | Object | {type: "", data: []} | type： 1--隐藏、2--显示，data里面是节点类型：节点类型 | ocrData | Object | {url: "", nodeType: []} | url: ocr识别的路径，nodeType： 需要识别的节点集合 | limitSize | Object | {nodeType: } | nodeType：是指具体的节点比如 营业执照N00009 {N00009: 1024 } 大小为数字类型 | type | String | '' | 保存-save 打开新网页-openNewPage | openNewPageInfo | Object | {type: "", info} | type（表格--xlsx，） info（@openNewPageFun方法中返回的val） |@openNewPageFun | function | | {type:'openNewPage', val: {}} |@reNodeInfo | function | | 返回给综平当前点击的节点 | fileOrigin | String | '' | 文件来源--control_csp | limitFormata | Array | [{node: "", formata: []}] | 节点限制只上传某些文件节点 nodeType --- 文件节点，formata --- 文件形式 | pdfBase | String | '' | pdf展示基地址 | supplyFlag | String | '' | 补采和驳回流程，1：补采 ，2：驳回 | renewFlag | String | '' | 其他入口进入展示更新中标识，1：补采中 | passwordPermission | Object | {type: '1', nodeType: ['N00300',]} | 联合开户一般机构的密函权限限制，type: 1-无权限 , nodeType: 节点的nodeType | expendNode | String | '' | 默认展开节点 | showRules | String | '' | 期货开户的运营岗和维护岗--二级节点系统生成的展示或不展示（1-仅运营录入岗不展示） |@orcInfo | function | | orc回调信息，数据类型对象 |@reMsg | function | | 保存成功返回消息 type(openNewPage--打开新网页) |@saveReMsg | function | | 提交后台保存方法返回给综平 |@replaceCli | function | [{contentId:'',operatorType:''}] | 驳回、补采打标返回的数据 |baseUrl | string | | 请求的后端路径 |splitScreen | string | | 图片展示区域默认分屏数 |imgToolStyle | Object | {width:'0px',height;'0px'} | 影像弹窗的宽高 |treeVisible | Boolean | false | 目录树显示隐藏 显示--true 隐藏--false |headShow | Array | ['treeShow','upload'] | treeShow--显示树、upload--上传、save--提交、big--放大、small--缩小、leftRotation--左旋转、rightRotation--右旋转、split--分屏、replace--替换、supply--补采、reject--驳回、clean--清图、delete--删除、camera--高拍仪、ocr--ocr识别、refresh--刷新、download--下载、reuse--影像复用、拍照--padPhoto、上传--padUpload