現(xiàn)象描述：
車機(jī)上是深色背景模式，使用richtext包裹網(wǎng)頁(yè)內(nèi)容時(shí)，出現(xiàn)白色背景邊框，影響整體深色背景，問(wèn)題截圖如下：
問(wèn)題代碼：
<richtext type="html">{{content}}</richtext>
<script>
export default {
private: {
content:
<body style="background-color: #006000;">
<div style="background-color: #006000;">
<style>h1{color: yellow;}</style>
<p>h1</p>
<h1>文本測(cè)試</h1>
<p>h2</p>
<h2>文本測(cè)試</h2>
</div>
</body>
},
}
</script>
<style>
.rich-text {
background-color: #cd853f;
}
</style>
問(wèn)題分析：
車機(jī)上在使用richtext組件包裹html內(nèi)容后，在快應(yīng)用里通過(guò)class設(shè)置background-color是不生效的。如果richtext包裹的內(nèi)容只含網(wǎng)頁(yè)的body部分，即使在body上設(shè)置了背景色，在展示富文本時(shí)周圍也會(huì)出現(xiàn)一圈白色邊框。需要在richtext里寫完整的html，且在其html標(biāo)簽上設(shè)置背景色，背景色在展示時(shí)才能覆蓋邊框，不會(huì)出現(xiàn)白色的空隙。
解決方法：
在richtext里包裹一個(gè)完整的html格式的網(wǎng)頁(yè)，html標(biāo)簽中設(shè)置背景色。
<richtext type="html">{{content}}</richtext>
<script>
export default {
private: {
content:
`<!DOCTYPE html>
<html 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>
<style>h1{color: yellow;}</style>
<p>h1</p>
<h1>文本測(cè)試</h1>
<p>h2</p>
<h2>文本測(cè)試</h2>
</div>
</body>
</html>`
},
}
</script>
<style>
.rich-text {
background-color: #cd853f;
}
</style>
修改后效果圖如下：
AppGallery
專欄
閩公網(wǎng)安備 35010202001226號(hào)
