首页 > 其他分享 >API6中JS UI实现富文本组件居右显示

API6中JS UI实现富文本组件居右显示

时间:2023-07-05 15:44:22浏览次数:45  
标签:flex API6 index h1 JS content UI 文本

 【关键字】

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())
    }
}

 

【实现效果】

cke_16856.png

标签:flex,API6,index,h1,JS,content,UI,文本
From: https://www.cnblogs.com/mayism123/p/17528717.html

相关文章

  • VUE 2项目使用vue-json-excel导出数据
    记录一下后端返回的json数据转成excel导出这里外面使用的是vue-json-excel1.安装包npminstallvue-json-excel2.组件中使用<download-excelclass="btnbtn-default":data="json_data":fields="json_fields"worksheet="MyWorksheet"name=&......
  • element-ui的el-dialog主体滚动的小技巧
    一.场景element-ui的el-dialog的主体内容变多的时候,应该需要滚动条,所以解决方式:局部/全局设置样式;el-dialog源码改造。注意:看完了解思路,掌握max-height和overflow:auto的联合使用,el-scroll的使用即可二.方案一仅针对el-dialog__body的部分做处理,max-height:可以让内容......
  • js 实现 EventBus 事件总线
     EventBus一般用做单例,EventEmiter一般在组件或模块内使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&l......
  • egg.js
    引入joi进行参数校验按照依赖:npminstalljoi基本使用:constJoi=require('joi');constaddCatalogSchema=Joi.object({catalog:Joi.string().required(),});module.exports={addCatalogSchema,};//使用constctx=this.ctx;const{catalog}=ct......
  • elementui 时间选择器默认时间格式
    <el-date-pickerv-model="searchForm.date"@change="getDate"type="daterange"range-separator="至"......
  • 给第一行单元格赋值 + WPS JS获取工作表的总行数 + WPS JS获取工作表的总行数
    戳我,了解更多相关办公的小技巧给第一行单元格赋值1、在计算机中有一种ASCII编码,其中A在计算机中的表示的数字是65,a的ascii码是97,b的ascii码是98。2、从A1到F1可以看到第一个字母在变化,第2个数字始终是1,A的ascii码是65,F的ascii码是70。3、我们定义letter=65,使letter逐渐靠近70即可。......
  • jmeter非gui运行,jtl生成了,但是html报告没有生成
     jmeter非gui运行,jtl生成了,但是html报告没有生成,查看log,内容如下: 22:45:00,913ERRORo.a.j.JMeter:Errorgeneratingdashboard:org.apache.jmeter.report.dashboard.GenerationException:Errorwhileprocessingsamples:Mismatchbetweenexpectednumberofcolumns:17an......
  • [-002-]-Python3+Unittest+Selenium Web UI自动化测试之显示等待WebDriverWait
    1、WebDriverWait基本用法引入包#文件引入fromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasEC每0.5s定位ID为userid的元素,如果定位成功,执行下面的代码;直至15s超时抛出异常可用来检查页面元素是......
  • JavaScript发展历史(JS)
    JavaScript发展历史1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许他们直接嵌入网页。另一个是发明一......
  • web js 播放rtsp视频流方案
    场景需要在web端预览海康无线摄像头视频流,所以采用海康自身提供的websdk无法使用方案1rtsp流推送到应用服务器,应用服务器再通过ffmpeg推送到nginx,js再去拉流缺点:多了一层转发,造成了一定的延迟方案2通过webRTC方案,使用现有开源插件webrtc-streamerhttps://github......