Skip to content

Commit a49d166

Browse files
LiZheGuangLiZheGuang
committed
feat:增加过滤标签渲染样式
1 parent 5dc2642 commit a49d166

File tree

7 files changed

+67
-42
lines changed

7 files changed

+67
-42
lines changed

‎demo/index.js‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,37 @@ const spliPageName = (url) => {
77
};
88

99
const skeletonObj = [
10-
// {
11-
// pageUrl:
12-
// "http://10.8.16.145:8080/parent-wx-h5Shop-shopShow.html?actId=5e796b01cce13f039dca4ee5",
13-
// filterClass: [],
14-
// },
15-
// {
16-
// pageUrl:
17-
// "http://10.8.16.145:8080/parent-wx-h5Shop-list.html?id=5db95977947acb2e6d0c5a2d&fromtype=zheguangtestdddd&code=061qlt7j29zDpB0wE56j2HXe7j2qlt7j&state=parent",
18-
// filterClass: [],
19-
// },
20-
// {
21-
// pageUrl:
22-
// "http://10.8.16.145:8080/parent-wx-h5Shop-my.html?id=5db95977947acb2e6d0c5a2d&fromtype=zheguangtestdddd",
23-
// filterClass: [],
24-
// },
10+
{
11+
pageUrl:
12+
"http://10.8.16.145:8080/parent-wx-h5Shop-shopShow.html?actId=5e796b01cce13f039dca4ee5",
13+
filterClass: [],
14+
},
15+
{
16+
pageUrl:
17+
"http://10.8.16.145:8080/parent-wx-h5Shop-list.html?id=5db95977947acb2e6d0c5a2d&fromtype=zheguangtestdddd&code=061qlt7j29zDpB0wE56j2HXe7j2qlt7j&state=parent",
18+
filterClass: [],
19+
},
20+
{
21+
pageUrl:
22+
"http://10.8.16.145:8080/parent-wx-h5Shop-my.html?id=5db95977947acb2e6d0c5a2d&fromtype=zheguangtestdddd",
23+
filterClass: [],
24+
},
2525

26-
// {
27-
// pageUrl:
28-
// "http://10.8.16.145:8080/parent-wx-h5Shop-orderList.html?id=5db95977947acb2e6d0c5a2d",
29-
// filterClass: [],
30-
// },
3126
{
3227
pageUrl:
33-
"https://h5-v5-0.yangcong345.com/parent-wx-wrongBook-list.html?unionId=o8Xt4t-FKNinpBkr1dzMRgUsxUGM&fromType=all",
28+
"http://10.8.16.145:8080/parent-wx-h5Shop-orderList.html?id=5db95977947acb2e6d0c5a2d",
3429
filterClass: [],
3530
},
31+
{
32+
pageUrl:
33+
"https://h5-v5-0.yangcong345.com/parent-wx-wrongBook-list.html?unionId=o8Xt4t-FKNinpBkr1dzMRgUsxUGM&fromType=all",
34+
filterClass: [
35+
{
36+
class:'topic',
37+
color: "#ebebeb",
38+
}
39+
],
40+
},
3641
];
3742
skeletonObj.map((item) => {
3843
getSkeleton({
@@ -42,7 +47,7 @@ skeletonObj.map((item) => {
4247
device: "iPhone 6", // 为空则使用默认 PC 页面打开
4348
minGrayBlockWidth: 20,
4449
minGrayPseudoWidth: 10,
45-
debug: false,
50+
debug: flase,
4651
debugTime: 3000,
4752
filterClass: item.filterClass,
4853
// outputPath:'./ggname'//写入你要生成的目录在哪个项目里

‎demo/skeleton-output/skeleton-parent-wx-wrongBook-list.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎demo/skeleton-output/skeleton-parent-wx-wrongBook-list.png‎

-30.4 KB
Loading

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const getSkeleton = async function(options) {
5151
const result = insertSkeleton(skeletonImageBase64, options);
5252

5353
// Close the browser
54-
await browser.close();
54+
// await browser.close();
5555

5656
return result;
5757
};

‎src/script/dist/index.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,6 @@
495495
}
496496

497497
const ComputedStyle = getComputedStyle(node);
498-
499498
// The background image is changed to the main color
500499
if (ComputedStyle.backgroundImage !== 'none') {
501500
node.style.backgroundImage = 'none';
@@ -510,10 +509,10 @@
510509
}
511510

512511
// The border is changed to the main color
512+
513513
if (ComputedStyle.borderColor) {
514514
node.style.borderColor = MAIN_COLOR;
515515
node.style.backgroundColor = 'transparent';
516-
517516
}
518517

519518
// Set the background color of the user class
@@ -679,20 +678,31 @@
679678
const tagId = node.id;
680679
const filterClass = this.options.filterClass;
681680
const filterAs = [];
682-
filterClass.map(filter =>{
683-
const reg = RegExp(filter);
684-
const tagClass = reg.test(node.className);
685-
if(tagClass === true){
686-
filterAs.push(filter);
681+
tagName && filterClass.map(filter =>{
682+
const isClassName = document.querySelector(node.tagName.toLocaleLowerCase()).classList.contains( typeof filter === 'object' ? filter.class : filter);
683+
if(isClassName == true){
684+
filterAs.push(typeof filter === 'object' ? filter.class : filter);
687685
}
688686
});
689687
// console.log(node.className === 'content')
690688
// Preprocessing some styles
691689
beforeHandler(node, this.options);
692690
if(filterAs.length > 0){
691+
console.log(typeof filterClass);
692+
// 此处做成自定义传递参数来进行渲染
693+
if(typeof filterClass == 'object'){
694+
filterClass.map(filter =>{
695+
const thePresent = document.querySelector(node.tagName.toLocaleLowerCase()).classList.contains(filter.class);
696+
if(thePresent == true){
697+
node.style.backgroundColor = filter.color;
698+
node.style.color = filter.color;
699+
}
700+
});
701+
}else {
702+
node.style.backgroundColor = 'transparent';
703+
node.style.color = 'transparent';
704+
}
693705

694-
node.style.backgroundColor = 'transparent';
695-
node.style.color = 'transparent';
696706
if(tagName == 'IMG'){
697707
node.style.display = 'none';
698708
}

‎src/script/handler/before.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ function beforeHandler(node, options) {
2626
}
2727

2828
const ComputedStyle = getComputedStyle(node);
29-
3029
// The background image is changed to the main color
3130
if (ComputedStyle.backgroundImage !== 'none') {
3231
node.style.backgroundImage = 'none';
@@ -41,10 +40,10 @@ function beforeHandler(node, options) {
4140
}
4241

4342
// The border is changed to the main color
43+
4444
if (ComputedStyle.borderColor) {
4545
node.style.borderColor = MAIN_COLOR;
4646
node.style.backgroundColor = 'transparent';
47-
4847
}
4948

5049
// Set the background color of the user class

‎src/script/main.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -166,20 +166,31 @@ window.AwesomeSkeleton = {
166166
const tagId = node.id;
167167
const filterClass = this.options.filterClass
168168
const filterAs = []
169-
filterClass.map(filter =>{
170-
const reg = RegExp(filter);
171-
const tagClass = reg.test(node.className);
172-
if(tagClass === true){
173-
filterAs.push(filter)
169+
tagName && filterClass.map(filter =>{
170+
const isClassName = document.querySelector(node.tagName.toLocaleLowerCase()).classList.contains( typeof filter === 'object' ? filter.class : filter)
171+
if(isClassName == true){
172+
filterAs.push(typeof filter === 'object' ? filter.class : filter)
174173
}
175174
})
176175
// console.log(node.className === 'content')
177176
// Preprocessing some styles
178177
handler.before(node, this.options);
179178
if(filterAs.length > 0){
179+
console.log(typeof filterClass)
180+
// 此处做成自定义传递参数来进行渲染
181+
if(typeof filterClass == 'object'){
182+
filterClass.map(filter =>{
183+
const thePresent = document.querySelector(node.tagName.toLocaleLowerCase()).classList.contains(filter.class)
184+
if(thePresent == true){
185+
node.style.backgroundColor = filter.color;
186+
node.style.color = filter.color;
187+
}
188+
})
189+
}else{
190+
node.style.backgroundColor = 'transparent';
191+
node.style.color = 'transparent';
192+
}
180193

181-
node.style.backgroundColor = 'transparent';
182-
node.style.color = 'transparent';
183194
if(tagName == 'IMG'){
184195
node.style.display = 'none';
185196
}

0 commit comments

Comments
 (0)