tools.js
4.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/*
* @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)
* @param {boolean} iPadOnly 是否仅在iPad设备上适配,默认false
* @returns {string} 适配后的字体大小
*/
const getAdaptiveFontSize = (baseFontSize = 0.8, iPadOnly = false) => {
const deviceInfo = getDeviceInfo();
// 字体大小倍数配置
let fontSizeMultiplier = 1;
if (iPadOnly) {
// 仅iPad设备适配模式
if (deviceInfo.isiPad || deviceInfo.isTablet) {
fontSizeMultiplier = 1.5;
}
} else {
// 全设备适配模式(原逻辑)
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 };