概述

在Vue项目开发中，我们经常需要一些通用的工具函数来处理路径转换、链接判断、数据格式化等任务。本文将介绍一个实用的Vue工具类，包含多种常用功能，并演示如何在项目中使用它们。

工具函数详解

1. 路径转驼峰命名

import { pathToCamel } from './tool'const path = '/user/info'
console.log(pathToCamel(path)) // 输出: "userInfo"

2. 判断外链

import { isExternalLink } from './tool'console.log(isExternalLink('https://example.com')) // true
console.log(isExternalLink('//example.com')) // true
console.log(isExternalLink('/local/path')) // false

3. 文件大小格式化

import { convertSizeFormat } from './tool'console.log(convertSizeFormat(1024)) // "1.00 KB"
console.log(convertSizeFormat(1048576)) // "1.00 MB"

4. 字典数据操作

import { getDictLabel, getDictDataList } from './tool'const dictList = [{dictType: 'gender',dataList: [{ dictValue: '1', dictLabel: '男' },{ dictValue: '2', dictLabel: '女' }]}
]console.log(getDictLabel(dictList, 'gender', '1')) // "男"
console.log(getDictDataList(dictList, 'gender')) 
// 输出: [{ dictValue: '1', dictLabel: '男' }, { dictValue: '2', dictLabel: '女' }]

5. 根据ID获取名称

import { getNameById, getValByProjectId, getNameByUserId } from './tool'const projectList = [{ id: 1, name: '项目A' }]
const userList = [{ id: 1, username: 'admin' }]console.log(getValByProjectId(projectList, 1)) // "项目A"
console.log(getNameByUserId(userList, 1)) // "admin"
console.log(getNameById(projectList, 1)) // "项目A"

全局组件安装

工具类中还提供了一个withInstall方法，用于更方便地注册全局组件：

// 假设我们有一个组件 MyComponent
import MyComponent from './MyComponent.vue'
import { withInstall } from './tool'// 注册组件
const GlobalComponent = withInstall(MyComponent, '$myComp')// 在main.ts中使用
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.use(GlobalComponent)// 现在可以在任何地方使用MyComponent
// 并且可以通过this.$myComp访问组件实例(如果设置了alias)

完整示例

下面是一个综合使用这些工具函数的示例：

import { pathToCamel, isExternalLink, convertSizeFormat,getDictLabel,withInstall
} from './tool'// 1. 路径转换
const apiPath = '/user/account/info'
const camelName = pathToCamel(apiPath)
console.log(`API名称: ${camelName}`)// 2. 链接检查
const url = 'https://example.com/api'
if (isExternalLink(url)) {console.log('这是一个外部链接')
}// 3. 文件大小格式化
const fileSize = 5325821 // 5.08 MB
console.log(`文件大小: ${convertSizeFormat(fileSize)}`)// 4. 字典标签获取
const dictData = [{dictType: 'status',dataList: [{ dictValue: '0', dictLabel: '禁用' },{ dictValue: '1', dictLabel: '启用' }]}
]
console.log(`状态: ${getDictLabel(dictData, 'status', '1')}`)// 5. 组件注册
import CustomButton from './components/CustomButton.vue'
export const GlobalButton = withInstall(CustomButton, '$button')