nini-tools 使用指南

📦 安装

npm install nini-tools

📦 介绍

nini-tools 是一个个人自用的 JavaScript 工具包，提供了常用的工具函数，包括对象数组操作、手机号脱敏、URL处理、文件下载等功能。

🚀 功能列表

对象数组操作 (objectArray)

• getLabelBaseOnValue - 根据 value 获取对应的 label
• getLabelBaseOnValueMultipleStr - 多个 value 字符串转多个 label（支持逗号分隔）
• getValueBaseOnLabel - 根据 label 获取对应的 value

通用工具函数 (utils)

• phoneHide - 手机号脱敏处理
• getFullUrl - URL 处理，自动拼接基础地址
• downloadFile - 文件下载功能

📖 使用示例

基础使用

import { 
  getLabelBaseOnValue, 
  phoneHide, 
  getFullUrl, 
  downloadFile 
} from 'nini-tools';

// 对象数组操作
const statusList = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
];
const statusLabel = getLabelBaseOnValue(1, statusList); // '启用'

// 手机号脱敏
const maskedPhone = phoneHide('13112345678'); // '131****5678'

// URL 处理
const fullUrl = getFullUrl('/image.jpg', 'https://example.com'); 
// 'https://example.com/image.jpg'

// 文件下载
downloadFile('https://example.com/file.pdf', 'document.pdf');

Vue 3 中使用

1. 在组件中直接导入使用

<template>
  <div>
    <p>手机号: {{ maskedPhone }}</p>
    <p>状态: {{ statusLabel }}</p>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { phoneHide, getLabelBaseOnValue, downloadFile } from 'nini-tools';

const phone = '13112345678';
const maskedPhone = computed(() => phoneHide(phone));

const statusList = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
];
const statusLabel = computed(() => getLabelBaseOnValue(1, statusList));

const handleDownload = () => {
  downloadFile('https://example.com/file.pdf', 'document.pdf');
};
</script>

2. 作为全局工具函数

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import * as NiniTools from 'nini-tools';

const app = createApp(App);

// 挂载到全局属性
app.config.globalProperties.$tools = NiniTools;

// 或者使用 provide/inject
app.provide('niniTools', NiniTools);

app.mount('#app');

<template>
  <div>
    <p>手机号: {{ $tools.phoneHide('13112345678') }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const niniTools = inject('niniTools');
const maskedPhone = niniTools.phoneHide('13112345678');
</script>

3. 在 Vuex/Pinia 中使用

// store/index.js (Vuex)
import { createStore } from 'vuex';
import { getLabelBaseOnValue } from 'nini-tools';

export default createStore({
  state: {
    statusList: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  },
  getters: {
    getStatusLabel: (state) => (value) => {
      return getLabelBaseOnValue(value, state.statusList);
    }
  }
});

// stores/user.js (Pinia)
import { defineStore } from 'pinia';
import { phoneHide } from 'nini-tools';

export const useUserStore = defineStore('user', {
  state: () => ({
    phone: '13112345678'
  }),
  getters: {
    maskedPhone: (state) => phoneHide(state.phone)
  }
});

🔧 API 文档

phoneHide(phone)

手机号脱敏处理

参数:

• phone (string | number): 手机号

返回值:

• string | undefined: 脱敏后的手机号，格式为 131****1234

示例:

phoneHide('13112345678'); // '131****5678'
phoneHide(13112345678);   // '131****5678'
phoneHide('');            // undefined

getFullUrl(url, baseUrl)

URL 处理，自动拼接基础地址

参数:

• url (string): 图片地址
• baseUrl (string): 基础URL，默认为空字符串

返回值:

• string: 完整的图片地址

示例:

getFullUrl('/image.jpg', 'https://example.com'); 
// 'https://example.com/image.jpg'

getFullUrl('https://example.com/image.jpg'); 
// 'https://example.com/image.jpg'

downloadFile(url, fileName)

文件下载功能

参数:

• url (string): 文件URL
• fileName (string): 文件名

返回值:

• Promise<void>

示例:

downloadFile('https://example.com/file.pdf', 'document.pdf');

getLabelBaseOnValue(value, objArr, config)

根据 value 获取对应的 label

参数:

• value (any): 要查找的值
• objArr (Array): 对象数组
• config (Object): 配置对象，可选
  • labelName (string): label 字段名，默认 'label'
  • valueName (string): value 字段名，默认 'value'

返回值:

• string | null: 对应的 label 或 null

示例:

const list = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
];
getLabelBaseOnValue(1, list); // '启用'

📝 更新日志

v1.0.2

• 新增手机号脱敏功能 (phoneHide)
• 新增URL处理功能 (getFullUrl)
• 新增文件下载功能 (downloadFile)
• 完善单元测试覆盖
• 更新文档说明

📄 许可证

MIT License