Symptom Description:

There is a dark background mode on the car. When richText is used to wrap the web content, a white background border appears, which affects the overall dark background. The screenshot of the problem is as follows:

Problem code:

<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 - the title" > h1 < / p > < h1 > text test < / h1 > < p class = "item - the title" > h2 < / p > < h2 > text test < / h2 > < / div > < / body >}, } </script> <style> .rich-text { background-color: #cd853f; } </style>Copy the code

Problem analysis:

Background-color in a quick application does not take effect after wrapping HTML content with the RichText component. If the content of the richtext wrap contains only the body of the web page, a white border will appear when richtext is displayed, even if the background color is set on the body. You need to write the complete HTML in RichText, and set the background color on the HTML tag, so that the background color can cover the border when displayed, and there will be no white gap.

Solutions:

Wrap a complete HTML page in RichText, and set the background color in the HTML tag.

<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, <div class="item-content"> <div class="item-content"> < span style>h1{color: yellow; } < / style > < p class = "item - the title" > h1 < / p > < h1 > text test < / h1 > < p class = "item - the title" > h2 < / p > < h2 > text test < / h2 > < / div > < / body > < / HTML > ` }, } </script> <style> .rich-text { background-color: #cd853f; } </style>Copy the code

The modified renderings are as follows:

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism