現象描述：
車機上是深色背景模式，使用richtext包裹網頁內容時，出現白色背景邊框，影響整體深色背景，問題截圖如下：
問題代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
richtext
type
=
"html"
class
=
"rich-text"
>{{content}}</
richtext
>
<
script
>
export default {
private: {
content:
<
body
style
=
"background-color: #006000;"
>
<
div
class
=
"item-content"
style
=
"background-color: #006000;"
>
<
style
>h1{color: yellow;}</
style
>
<
p
class
=
"item-title"
>h1</
p
>
<
h1
>文本測試</
h1
>
<
p
class
=
"item-title"
>h2</
p
>
<
h2
>文本測試</
h2
>
</
div
>
</
body
>
},
}
</
script
>
<
style
>
.rich-text {
background-color: #cd853f;
}
</
style
>
|
問題分析：
車機上在使用richtext組件包裹html內容後，在快應用裏通過class設置background-color是不生效的。如果richtext包裹的內容只含網頁的body部分，即使在body上設置了背景色，在展示富文本時周圍也會出現一圈白色邊框。需要在richtext裏寫完整的html，且在其html標籤上設置背景色，背景色在展示時才能覆蓋邊框，不會出現白色的空隙。
解決方法：
在richtext裏包裹一個完整的html格式的網頁，html標籤中設置背景色。
|
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
|
<
richtext
type
=
"html"
class
=
"rich-text"
>{{content}}</
richtext
>
<
script
>
export default {
private: {
content:
`<!DOCTYPE html>
<
html
lang
=
"en"
style
=
"background-color: #006000;"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Document</
title
>
</
head
>
<
body
>
<
div
class
=
"item-content"
>
<
style
>h1{color: yellow;}</
style
>
<
p
class
=
"item-title"
>h1</
p
>
<
h1
>文本測試</
h1
>
<
p
class
=
"item-title"
>h2</
p
>
<
h2
>文本測試</
h2
>
</
div
>
</
body
>
</
html
>`
},
}
</
script
>
<
style
>
.rich-text {
background-color: #cd853f;
}
</
style
>
|
修改後效果圖如下：
原鏈接：https://developer.huawei.com/consumer/cn/forum/topic/0204429221972080033?fid=18
原作者：Mayism