matrix_components
v2.0.414
Published
组件使用示例参考dist/ComponentDemo
Readme
组件库2.0
组件使用示例参考dist/ComponentDemo
version:2.0.414
2025-12-26
更新日志：
1.NsForm使用el-cascader时，在readOnly只读模式时，传入最后一级字符串值能显示完整路径version:2.0.404
2025-12-19
更新日志：
1.新增动态表单NsForm组件添加FormDemo.vue示例version:2.0.400
2025-12-11
更新日志：
1.修改NsForm组件上传文件bugversion:2.0.395
2025-12-09
更新日志：
1.新增动态表单NsForm组件readOnly只读模式支持直接显示值version:2.0.377
2025-12-06
更新日志：
1.优化浸润线的测压管排序
2.新增浸润线fullData全量数据并兼容老传值方案version:2.0.365
2025-12-01
更新日志：
1.NsForm组件添加重置方法resetForm()version:2.0.362
2025-12-01
更新日志：
1.重构NsForm组件，支持动态组件
2.增加NsFormTitle动态表单标题组件，用法参考：FormDemo.vueversion:2.0.360
2025-11-29
更新日志：
1.增加数值范围指令 v-length.range="{ min: 0, max: 100, int: true, maxLength: 10 }"version:2.0.352
2025-11-28
更新日志：
1.修改NsImage组件bugversion:2.0.330
2025-11-24
更新日志：
1.NsDialog增加全部弹窗关闭方法closeAllNsDialog
2.添加post, get, put, del, download, downLoadLocalFile 等axios请求方法version:2.0.321
2025-11-19 09:49:26
更新日志：
1.NsOffice组件边距修改version:2.0.320
2025-11-18 09:53:06
更新日志：
1.NsOffice组件无数据时，样式修改version:2.0.319
2025-11-15 17:21:09
更新日志：
1.NsVideo增加获取原始视频宽高的事件videoOriginalInfo和方法getOriginalInfo()
2.NsVideo增加外层遮罩version:2.0.316
2025-11-14 11:09:09
更新日志：
1.浸润线，测压管文字居中version:2.0.315
2025-11-13 13:10:40
更新日志：
1.弹出框回车默认触发“确定”按钮version:2.0.314
2025年11月11日13:16:40
更新日志：
1.NsWord修改样式version:2.0.312
2025-11-05 13:59:02
更新日志：
1.修改测压管文字version:2.0.309
2025-10-31 13:09:20
更新日志：
1.增加NsImage组件, 添加无法获取图片时使用默认图片version:2.0.308
2025年10月23日11:21:46
更新日志：
1.增加Demo示例目录：组件使用示例在dist/ComponentDemoversion:2.0.305
2025年10月21日15:05:11
更新日志：
1.NsDialog添加修改标题的方法version:2.0.302
2025年10月21日10:03:50
更新日志：
1.新增浸润线version:2.0.301
2025年10月20日17:38:41
更新日志：
1.新增动态组件NsForm（简易版本）version:2.0.300
2025年10月9日14:58:45
更新日志：
1.支持输入框自定义正则： v-length.regex="{ maxLength: 100, pattern: /^[a-zA-Z0-9]*$/ }"version:2.0.299
2025年9月29日18:59:38
更新日志：
1.NsDialog弹出框支持返回dom动态组件Ref
2.绑定window.__dialogInstances, 保存所有弹出框实例version:2.0.298
2025年9月24日17:03:10
更新日志：
1.NsOffice样式修改version:2.0.297
2025年9月19日16:54:21
更新日志：
1.添加NsDialog支持允许穿透, modal:false即可穿透version:2.0.296
2025年9月18日13:21:31
更新日志：
1.优化NsExcel非弹窗模式切换file时重新加载
2.增加NsOffice组件version:2.0.295
2025年9月18日09:56:34
更新日志：
1.NsVideo没有树结构时，样式修改version:2.0.294
2025年9月15日15:50:49
更新日志：
1.NsDialog弹出框支持x/y定位和放大还原功能version:2.0.293
2025年9月15日15:50:49
更新日志：
1.NsWord预览组件
2.修改NsExcel，支持url和上传文件方式预览，新增只读模式version:2.0.292
2025年8月13日10:30:59
更新日志：
1.NsPdf预览组件支持搜索功能创建公共组件库步骤
npm create vue@latest
主目录：创建packages（任意文件夹）, 创建全局导出文件index.ts
主index.ts import NsXX from './packages/NsXX/index.ts' const components = { NsXX, 其他公共组件 } const NsComponents = { install: (app: App)=> { Object.Keys(components).forEach((compName)=>{ app.component(compName, components[compName]) }) } } // 按需导出 export { NsXX, 其他公共组件 } // 全局导入 export default NsComponents子目录：NsXX目录，创建独立导出index.ts
子index.ts： import NsXX from './comps/index.ts' // 按需导出 NsXX.install = (app)=>{ app.component(NsXX.name, NsXX) } // 导出子组件 export default NsXX配置package.json
{ "name": "matrix_components", // 打包的名称 "version": "2.0.100", // 版本号 "private": false, // 是否私有 "type": "module", "files": [ "dist" ], "main": "./dist/matrix_components.umd.cjs", "module": "./dist/matrix_components.js", "exports": { "./dist/matrix_components.css": "./dist/matrix_components.css", "./css": "./dist/matrix_components.css", ".": { "import": "./dist/matrix_components.js", "require": "./dist/matrix_components.umd.cjs" } }, "publishConfig": { "registry": "http://199.10.9.178:8081/repository/npm-hosted/" }, ... }配置vite.config.ts
build: { outDir: "dist", lib: { // 指定入口主文件！！！！ entry: fileURLToPath(new URL("./pacakges/index.ts"), import.meta.url), // 组件库导出后可以使用的全局变量 name: 'MatrixComponents', // 不指定为package.json的name属性 fileName: 'matrix_components', }， rollupOptions: { // 使用外部依赖（打包时删除的包，避免打入到组件库中） external: ["vue"], output: { // 主index.ts导出多个module时需要指定"named"否则报警告，默认为"default" exports: 'named', // 配合external: ["vue"]， 使用外部项目的变量映射 globals: { vue: 'Vue', }, } }, // 【可选】压缩方式，viet3+需安装pnpm i terser -D minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true, }, format: { comments: false, }, }, }打包
npm run build当前项目main.ts使用
import NsComponents from '../dist/matrix_components.js' // 按需引入 // import {NsXX} from '../dist/matrix_components,js' ... app.use(NsComponents) // 按需引入 // app.use(NsXX)当前项目Test.vue使用
<template> <NsXX /> </template>
使用公共组件库
// 1. 引入组件库
pnpm i element-plus
pnpm i matrix_components -S --registry=http://199.10.9.178:8081/repository/npm-group/
// 安装失败：pnpm i matrix_components --registry=http://199.10.9.178:8081/repository/npm-hosted/
// 非初始化安装
pnpm i -S --registry=http://199.10.9.178:8081/repository/npm-group/
// 2. main.ts中引入
// 安装 Element-Plus
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})
// 安装组件库(ts需要//@ts-ignore)
//@ts-ignore
import NsComponents from 'matrix_components'
import 'matrix_components/dist/matrix_components.css'
app.use(NsComponents)
1. 视频组件（NsVideo）
// 1. 复制播放器资源
js文件夹 到 public/目录中
cdn文件夹 到 public/目录中
// 2. index.html中引入
<script src="./js/EasyPlayer-pro.js"></script>
<script src="./cdn/h5player/h5player.min.js"></script>
// 3.安装公共组件库 (安装过则无需安装)
//@ts-ignore
import NsComponents from 'matrix_components'
import 'matrix_components/dist/matrix_components.css'
app.use(NsComponents)
// 4. 项目组件中引入视频组件, NsVideo组件配置参考NsVideo目录ReadMe.md和VideoDemo.vue
<template>
<NsVideo class="nsvideo" ref="nsVideoRef" v-bind="videoData" v-on="videoEvent" @changeSplit='changeSplitHandler'>
<!-- 自定义插槽
<template #video-tree><span>左侧树-自定义插槽</span></template>
<template #video-player-head><span>播放区域头部-自定义插槽</span></template>
<template #video-player-view><span>播放区域主体-自定义插槽</span></template>
<template #video-player-foot><span>播放区域底部控制按钮-自定义插槽</span></template>
-->
</NsVideo>
</template>2. 自适应函数（autoScaleInit）
// 1. 安装公共组件库 (安装过则无需安装)
//@ts-ignore
import NsComponents, { autoScaleInit } from 'matrix_components'
import 'matrix_components/dist/matrix_components.css'
app.use(NsComponents)
// 2. 在main.t中初始化，建议在App创建之前
autoScaleInit(document.querySelector('body'), {
designWidth: 1920,
designHeight: 920,
mode: 'stretch', // 可选 horizontal/vertical/stretch
});
3. 弹出框组件（NsDialog）
import { NsDialog } from 'matrix_components'
NsDialog({
title: '测试',
// 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
dom: VideoDemo, // 也可以通过异步方式：import("@/views/VideoDemo.vue") 和 () => import("@/views/VideoDemo.vue")
option: {
// dom对应的自定义组件props属性
...data,
},
events: {
// dom组件内部自定义事件emit('btnClick', xxx)
btnClick: () => {
console.log("点击中间区域内容");
},
},
modalColor: 'rgb(0 21 115 / 20%)', // 遮罩层颜色
width: '800px', // 宽度, 整个弹出框的高度，非内容高度
height: '450px', // 高度, 不配置则默认为内容高度
dialogPadding: [10, 20], // 弹窗内padding
showFooter: true, // 默认显示底部按钮
immediately: false, // true立即取消弹出框, false异步请求后取消弹出框，默认false
draggable: true, // 是否可拖拽，默认false
confirm: async (closeFn: any, componentRef: any, footerLoading: any) => { // 底部确认按钮回调事件
// 2.componentRef可以调用内部函数，前提需要defineExpose
try{
const selectRows = componentRef?.value?.getSelectedRows();
console.log("点击确认，选择数据：", selectRows);
} catch(e) {
console.log(e)
await new Promise(resolve => setTimeout(resolve, 1000))
}
// 3.footerLoading可以控制底部loading状态
if(footerLoading) {
footerLoading.value = false
}
// 1.请求数据，再关闭
if(closeFn) {
closeFn()
}
},
close: () => { // 关闭弹出时立即出发
console.log("点击关闭");
},
closed: () => { // 弹窗销毁时触发
console.log("完成关闭");
},
// 头部+底部自定义配置
// 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
headerDom: xxx,
headerOption: {},
headerEvents: {},
// 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
footerDom: yyy,
footerOption: {},
footerEvents: {},
// 底部按钮名称
footerTitle: {
close: "取消",
confirm: "确定",
},
}, true, '#app') // true为是否遮罩（非必填）， '#app'为挂载点（非必填）4. 指令集（v-permission / v-length / v-event-unuse / v-event-use / v-sline）
// 使用方法
// 1. 按钮权限 v-permission.class.display / v-permission.id.display / v-permission.class / v-permission.id(默认)
<button id="zuhu_list_add" v-permission>新增</button>
// 使用按钮权限时，需要在外部项目中通过注入权限数据实现（注意：需要在引入公共组件库之前！！！）
app.provide('btnsPermission', btnsPermission)
// NsComponents为引入公共组件库
app.use(NsComponents)
// 2. 长度限制(默认50位)：v-length[.number][="100"]， 如：v-length.number="11" / v-length
// .number 修饰符会限制只能输入数字（通过输入事件过滤非数字字符）
<el-input placeholder="请输入手机号" v-length.number="11"/>
<el-input placeholder="请输入用户名" v-length />
// 3. span单行显示并隐藏溢出文本： 'v-sline'
<span v-sline >xxxx</span>
// 4. 用在能点击下层事件时：event-use (阻止穿透事件) / event-unuse (穿透事件)
<div v-event-use></div>
<div>无法点击到</div>
<div v-event-unuse></div>
<div>可以点击到</div>
5. sm2加密（getEncryptSm2）
// 使用方法
import NsComponents, { getEncryptSm2 } from 'matrix_components'
app.use(NsComponents)
const encrypArrs = getEncryptSm2(publicKey, ["xxx", "yyy"], isAdd04=false, cipherMode=1)
6. get/post请求（http/get）
// 使用方法
// 1. main.ts中引入, 并指定app.config.globalProperties.$BaseUrl全局请求地址
import NsComponents from 'matrix_components'
// 请求地址的baseUrl，建议在app.use(NsComponents)之前设置
app.config.globalProperties.$BaseUrl = 'http://请求ip：端口/'
// 图片、文件请求地址的ImageBaseUrl，建议在app.use(NsComponents)之前设置
app.config.globalProperties.$ImageBaseUrl = 'http://请求ip：端口/'
app.use(NsComponents)
// 【可选】401无权显示回调
app.config.globalProperties.$LogoutCallback = logoutHandler // 无权显示回调
// 【可选】请求添加的token头的key，默认为satoken。token的key和value需要在外部项目中自己设置
sessionStorage.setItem('tokenName', 'xxx')
sessionStorage.setItem('tokenValue', 'yyy')
// 2. xx.vue / xx.ts 调用获取get、post请求
import { get, post } from 'matrix_components'
export const login = (data) => post('/mag/AccAdmin/doLogin', data);7. NsPdf组件
// 使用方法
import { NsPdf } from 'matrix_components'
<NsPdf ref="pdfRef" :url="pdfUrl"></NsPdf>
const pdfRef = ref()
function searchKeyword() {
pdfRef.value?.search('人')
}8. NsOffice组件
// 统一的办公文档预览组件，根据文件URL自动选择合适的组件
// 支持格式：Excel(.xlsx/.xls)、PDF(.pdf)、Word(.docx/.doc)
// 使用方法
import { NsOffice } from 'matrix_components'
// 基础使用
<NsOffice :url="fileUrl" />
// Excel编辑模式（仅对Excel文件有效）
<NsOffice :url="excelUrl" :isEdit="true" />
// 获取组件信息
<NsOffice ref="officeRef" :url="fileUrl" />
const officeRef = ref()
// 获取文件类型
const fileType = officeRef.value?.getFileType() // 'excel' | 'pdf' | 'word' | 'unsupported'
// 获取当前激活的组件实例
const activeComponent = officeRef.value?.getActiveComponent()
// 刷新组件
officeRef.value?.refresh()