tools.js 4.6 KB
/*
 * @Date: 2022-04-18 15:59:42
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-08-07 13:31:59
 * @FilePath: /map-demo/src/utils/tools.js
 * @Description: 文件描述
 */
import dayjs from 'dayjs';

// 格式化时间
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm');
};

/**
 * @description 判断浏览器属于平台
 * @returns
 */
const wxInfo = () => {
  let u = navigator.userAgent;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  let uAgent = navigator.userAgent.toLowerCase();
  let isTable = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
  let isPC = uAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i,
  )
    ? false
    : true;
  return {
    isAndroid,
    isiOS,
    isTable,
    isPC,
  };
};

/**
 * @description 判断多行省略文本
 * @param {*} id 目标dom标签
 * @returns
 */
const hasEllipsis = (id) => {
  let oDiv = document.getElementById(id);
  let flag = false;
  if (oDiv.scrollHeight > oDiv.clientHeight) {
    flag = true
  }
  return flag
}

/**
 * @description 解析URL参数
 * @param {*} url
 * @returns
 */
const parseQueryString = url => {
  var json = {};
  var arr = url.indexOf('?') >= 0 ? url.substr(url.indexOf('?') + 1).split('&') : [];
  arr.forEach(item => {
    var tmp = item.split('=');
    json[tmp[0]] = tmp[1];
  });
  return json;
}

/**
 * 字符串包含字符数组中字符的状态
 * @param {*} array 字符数组
 * @param {*} str 字符串
 * @returns 包含状态
 */
const strExist = (array, str) => {
  const exist = array.filter(arr => {
    if (str.indexOf(arr) >= 0) return str;
  })
  return exist.length > 0
}

/**
 * @description 获取设备类型和屏幕信息
 * @returns {Object} 设备信息对象
 */
const getDeviceInfo = () => {
  const userAgent = navigator.userAgent;
  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
  const screenHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 检测iPad
  const isiPad = /iPad/.test(userAgent) || 
    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
    (screenWidth >= 768 && screenWidth <= 1024);
  
  // 检测微信环境
  const isWeChat = /MicroMessenger/i.test(userAgent);
  
  // 检测移动设备
  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
  
  // 检测平板设备(包括iPad)
  const isTablet = isiPad || (screenWidth >= 768 && screenWidth <= 1024);
  
  // 检测大屏设备
  const isLargeScreen = screenWidth >= 1024;
  
  return {
    isiPad,
    isWeChat,
    isMobile,
    isTablet,
    isLargeScreen,
    screenWidth,
    screenHeight,
    userAgent
  };
};

/**
 * @description 根据设备类型获取适配的字体大小
 * @param {number} baseFontSize 基础字体大小(rem)
 * @returns {string} 适配后的字体大小
 */
const getAdaptiveFontSize = (baseFontSize = 0.8) => {
  const deviceInfo = getDeviceInfo();
  
  // 字体大小倍数配置
  let fontSizeMultiplier = 1;
  
  if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
    // 微信小程序大屏环境
    fontSizeMultiplier = 1.8;
  } else if (deviceInfo.isiPad || deviceInfo.isTablet) {
    // iPad或平板设备
    fontSizeMultiplier = 1.5;
  } else if (deviceInfo.isLargeScreen) {
    // 大屏设备(桌面)
    fontSizeMultiplier = 1.6;
  } else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
    // 中等屏幕设备
    fontSizeMultiplier = 1.2;
  }
  
  const adaptedSize = baseFontSize * fontSizeMultiplier;
  return `${adaptedSize}rem`;
};

/**
 * @description 根据设备类型获取适配的内边距
 * @param {string} basePadding 基础内边距
 * @returns {string} 适配后的内边距
 */
const getAdaptivePadding = (basePadding = '.5rem .2rem .5rem .2rem') => {
  const deviceInfo = getDeviceInfo();
  
  if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
    return '1rem .4rem 1rem .4rem';
  } else if (deviceInfo.isiPad || deviceInfo.isTablet) {
    return '.8rem .3rem .8rem .3rem';
  } else if (deviceInfo.isLargeScreen) {
    return '.9rem .35rem .9rem .35rem';
  } else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
    return '.6rem .25rem .6rem .25rem';
  }
  
  return basePadding;
};

export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, getDeviceInfo, getAdaptiveFontSize, getAdaptivePadding };