【关键字】
RichText、富文本组件、API6、JS UI、居右显示
【关键代码如下】
index.hml
<div class="container">
<div class="top">
<richtext @start="onLoadStart" @complete="onLoadEnd" class="rich">{{content}}</richtext>
</div>
</div>
index.css
.container {
flex-direction: column;
padding-left: 10px;
align-items:flex-start;
}
.top {
width: 100%;
flex-direction: row;
height: 50px;
justify-content:flex-end;
align-items: flex-end;
}
.rich{
width: 100px;
height:45px;
padding: 5px;
}
index.js
export default {
data: {
content: `
<div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;" style="background-color: #FFFFFF">
<style>h1{color: yellow;}</style>
<p class="item-title">h1</p>
<h1>文本测试(h1测试)</h1>
<p class="item-title">h2</p>
<h2>文本测试(h2测试)</h2>
</div>
`,
},
onl oadStart() {
console.error("start load rich text:" + JSON.stringify())
},
onl oadEnd() {
console.error("end load rich text:" + JSON.stringify())
}
}
【实现效果】
标签:flex,API6,index,h1,JS,content,UI,文本 From: https://www.cnblogs.com/mayism123/p/17528717.html