-
Notifications
You must be signed in to change notification settings - Fork 1
/
core.ts
89 lines (74 loc) · 2.03 KB
/
core.ts
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
import type { IVLazyOptions } from './types';
const htmlReg = /(?<=<template>)([\s\S]+)(?=<\/template>)/;
const imgReg = /(<img[\s\S]+?)v-lazy=(?:"|')(.*?)(?:"|')([\s\S]*?>)/g;
const sizeReg = /(?<=[\s\n]+(?:data-)?)size=(?:"|')(\d+)(?:"|')/;
const widthReg = /(?<=[\s\n]+(?:data-)?)width=(?:"|')(\d+)(?:"|')/;
const heightReg = /(?<=[\s\n]+(?:data-)?)height=(?:"|')(\d+)(?:"|')/;
export function vLazyCore(source: string, options?: IVLazyOptions) {
const { urlHandler } = options || {};
let html = '';
const match = source.match(htmlReg);
if (match?.[1]) {
html = match[1];
}
if (!html) return source;
if (!html.match(imgReg)) return source;
const newHtml = handleImg(html, urlHandler as string);
const newSource = source.replace(htmlReg, () => newHtml);
return newSource;
}
function getSize(pre: string, post: string, reg: RegExp) {
let size = '';
const preMatch = pre.match(reg);
const postMatch = post.match(reg);
if (preMatch?.[1]) {
size = preMatch[1];
} else if (postMatch?.[1]) {
size = postMatch[1];
}
return size;
}
function getImgSrc({
urlHandler,
src,
size,
width,
height,
}: {
urlHandler?: string;
src: string;
size: string | number;
width: string | number;
height: string | number;
}) {
let srcStr = src;
if (!urlHandler) {
return src;
}
if (width && height) {
srcStr = `${urlHandler}(${src}, ${width}, ${height})`;
} else if (size) {
srcStr = `${urlHandler}(${src}, ${size}, ${size})`;
} else {
srcStr = `${urlHandler}(${src})`;
}
return srcStr;
}
function handleImg(str = '', urlHandler = '') {
const res = str.replace(imgReg, (...args) => {
const { 1: pre, 2: src, 3: post } = args;
const size = getSize(pre, post, sizeReg);
const width = getSize(pre, post, widthReg);
const height = getSize(pre, post, heightReg);
const srcStr = getImgSrc({
urlHandler,
src,
size,
width,
height,
});
const innerRes = `${pre} :src="${srcStr}" lazy-load ${post}`;
return innerRes;
});
return res;
}