@deppon/deppon-utils

@deppon/deppon-utils

前端工具函数库，适用于 Vue 项目。

功能

提供丰富的工具函数，包括：

DOM 操作

• removeClass - 移除 DOM 类名
• removeDom - 移除 DOM 元素
• insertAfter - 在元素后插入
• findParentDom - 查找父元素

浏览器相关

• browser - 浏览器检测
• setTitle - 设置页面标题
• windowScrollTop - 获取/设置滚动位置
• scrollTo - 滚动到指定位置
• scrollToElement - 滚动到指定元素
• noScroll - 禁止滚动
• resolveIOSScroll - 解决 iOS 滚动问题

工具函数

• debounce - 防抖
• throttle - 节流
• random - 随机数生成
• isPhone - 手机号验证
• isArray - 数组判断
• isObject - 对象判断
• isString - 字符串判断
• removeSpace - 移除空格
• lengthOfStr - 字符串长度计算
• splitArray - 数组分割

URL 处理

• parseUrlParams - 解析 URL 参数
• objectToParams - 对象转 URL 参数
• replcaeUrlParam - 替换 URL 参数
• replcaeUrlParams - 替换多个 URL 参数
• localUrl - 本地 URL 处理

iframe 路由跳转

• isViewTabSupported - 检查是否支持 viewTab（是否在 iframe 环境中）
• getParentParams - 从父级 iframe 获取参数
• appendUrlParam - 在 URL 后追加参数
• closeParentTab - 关闭父级标签页
• viewTab - 在 iframe 环境中打开新标签页
• navigate - 智能路由跳转（优先使用 viewTab，否则使用普通跳转）
• isUap - 判断系统是否在 UAP 环境内

Cookie 相关

• getCookie - 获取 Cookie
• setCookieDomain - 设置 document.domain 以支持 cookie 跨域
• copyStr - 复制字符串
• copyToClipboard - 复制到剪贴板
• preloadImage - 预加载图片
• Time - 时间处理
• queryCode - 查询代码
• login - 登录
• loginCheck - 登录检查
• authorize - 授权
• checkName - 名称检查
• open - 打开链接
• openApp - 打开 App
• xDomain - 跨域处理
• flexible - 移动端适配
• limitVersion - 版本限制
• observerDom - DOM 观察器
• md5 - MD5 加密
• getRestTimeStr - 获取剩余时间字符串

使用示例

iframe 路由跳转

import {
    viewTab,
    navigate,
    getParentParams,
    isViewTabSupported,
    appendUrlParam,
    closeParentTab,
} from '@deppon/deppon-utils';

// 检查是否支持 viewTab
if (isViewTabSupported()) {
    // 从父级获取参数
    const params = getParentParams();
    console.log('父级参数:', params);

    // 打开新标签页
    viewTab('产品折扣新增', '/product/discount/add', 'iframe', params, {
        uumsFunction: {
            functionCode: 'CMC_FUNCTION_00002',
            sourceSystem: 'CMC',
        },
        appendIsUap: true, // 默认会在 URL 后追加 isUap=true
    });

    // 或者使用智能跳转（自动降级）
    navigate('产品折扣新增', '/product/discount/add', 'iframe', params, {
        uumsFunction: {
            functionCode: 'CMC_FUNCTION_00002',
            sourceSystem: 'CMC',
        },
    });
}

// 在 URL 后追加参数
const urlWithParam = appendUrlParam('/product/list', 'isUap=true');

// 关闭父级标签页
closeParentTab('/product/list', 'IFRAME');

实际项目中的使用方式

// 替换原有的 top.viewTab 调用
import { viewTab, getParentParams, appendUrlParam, closeParentTab } from '@deppon/deppon-utils';

// 原有代码：
// top.viewTab && top.viewTab("CMC-产品折扣新增", url, "iframe", params, {
//     uumsFunction: {
//         functionCode: "CMC_FUNCTION_00002",
//         sourceSystem: "CMC",
//     },
// });

// 新代码：
const params = getParentParams();
viewTab('CMC-产品折扣新增', url, 'iframe', params, {
    uumsFunction: {
        functionCode: 'CMC_FUNCTION_00002',
        sourceSystem: 'CMC',
    },
});

// 如果需要先关闭标签页再打开
const tabUrl = appendUrlParam(url, 'isUap=true');
closeParentTab(tabUrl, 'IFRAME');
viewTab('CMC-产品折扣新增', url, 'iframe', params, {
    uumsFunction: {
        functionCode: 'CMC_FUNCTION_00002',
        sourceSystem: 'CMC',
    },
});

UAP 环境判断

import { isUap } from '@deppon/deppon-utils';

// 判断是否在 UAP 环境中
if (isUap()) {
    // UAP 环境下的逻辑
    console.log('当前在 UAP 环境中');
    // 隐藏头部、侧边栏等
    // 使用 UAP 特定的样式
} else {
    // 非 UAP 环境下的逻辑
    console.log('当前不在 UAP 环境中');
    // 显示完整的页面布局
}

// 在 Vue 组件中使用
export default {
    data() {
        return {
            isUapEnv: isUap(),
        };
    },
    mounted() {
        if (this.isUapEnv) {
            // UAP 环境初始化逻辑
        }
    },
};

UAP 环境判断逻辑：

• 检查 URL 参数中是否有 isUap=true（支持 query 和 hash 模式）
• 检查是否在 iframe 环境中且父级支持 viewTab 或 Ext

使用场景：

• 根据环境显示/隐藏页面元素（如头部、侧边栏）
• 应用不同的样式（如 UAP 环境下调整布局）
• 执行不同的初始化逻辑

Cookie 跨域设置

import { setCookieDomain } from '@deppon/deppon-utils';

// 在应用初始化时调用，自动设置 document.domain 以支持 cookie 跨域
setCookieDomain();

// 在 Vue 应用中使用
import { createApp } from 'vue';
import { setCookieDomain } from '@deppon/deppon-utils';

const app = createApp(App);
setCookieDomain(); // 在应用创建时调用
app.mount('#app');

设置逻辑：

• 如果 URL 包含 deppontest.com，自动设置 document.domain = 'deppontest.com'
• 如果 URL 包含 deppon.com，自动设置 document.domain = 'deppon.com'

注意事项：

• document.domain 只能在当前域或其父域上设置
• 设置 document.domain 后，端口号会被忽略
• 如果设置失败（例如跨域限制），会静默失败，不影响其他功能