Vue3 实用utils工具函数 | DOM 相关
·
查询元素是否存在某个 class
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
return reg.test(el.className);
}
给某个元素添加 class
export function addClass(el, className) {
if (hasClass(el, className)) {
return;
}
let curClass = el.className.split(' ');
curClass.push(className);
el.className = curClass.join(' ');
}
删除某个元素的 class
export function removeClass(el, className) {
if (!hasClass(el, className)) {
return;
}
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
el.className = el.className.replace(reg, ' ');
}
获取页面滚动距离
export function getScrollTop() {
let e = 0
return (
document.documentElement && document.documentElement.scrollTop
? (e = document.documentElement.scrollTop)
: document.body && (e = document.body.scrollTop),
e
)
}
滚动到某个位置回调
export function distanceScroll(distance, callback) {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const docHeight = document.body.clientHeight
const screenHeight = window.screen.availHeight
const differ = scrollTop > docHeight - screenHeight - distance
if (differ) {
callback && callback()
}
}
拨打电话
export const callPhone = (phone) => {
const aElement = document.createElement('a')
aElement.setAttribute('href', `tel:${phone}`)
document.body.appendChild(aElement)
aElement.click()
document.body.removeChild(aElement)
}
复制文本
export function copy(value, callback) {
if (!document.queryCommandSupported('copy')) {
callback('暂不支持复制')
return
}
const textarea = document.createElement('textarea')
textarea.value = value
textarea.readOnly = Boolean('readOnly')
document.body.appendChild(textarea)
textarea.select()
textarea.setSelectionRange(0, value.length)
document.execCommand('copy')
textarea.remove()
callback('复制成功')
}
动态加载第三方js
export function asyncLoadScript(url) {
return new Promise(function (resolve, reject) {
const tag = document.getElementsByTagName('script')
for (const i of tag) {
if (i.src === url) {
resolve()
return
}
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
script.onerror = reject
document.body.appendChild(script)
script.onload = () => {
resolve()
}
})
}
解决 requestAnimationFrame 的兼容问题
export function requestAnimationFrame() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
return setTimeout(callback, (callback.interval || (100 / 60) / 2);
};
}()
动态创建form表单导出数据(POST)
const postExport = (url, data = {}) => {
const form = document.createElement("form");
form.style.display = "none";
form.action = `${Config.baseURL}${url}`;
form.method = "post";
document.body.appendChild(form);
// 动态创建input并给value赋值
for (const key in data) {
const input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
form.submit();
form.remove();
}
更多推荐

所有评论(0)