uni-app生成小程序,v-html的内容用rich-text渲染出来,控制图片宽度

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

uni-app生成小程序,v-html的内容用rich-text渲染出来,控制图片宽度

夜光星空   2021-01-28 我要评论

在小程序里rich-text(查看文档)应该相当于v-html。 用uni-app做的一个页面,页面是后台返回的html字符串,字符串里有图片,图片用css设置了宽度,在h5显示正常,但小程序里面超出页面宽度,显示不全。

<view class="htmlContianer" v-html="description" />

css部分
.htmlContianer img{
 max-width: 100%;
}

点开控制台才发现,在小程序里,是渲染成rich-text标签。

 

 

 

经查阅资料,需要控制图片的样式,可以用以下2种方法:

1. 添加一个class ,然后在APP.vue里写样式(是全局样式),在页面写样式不生效。

this.description= this.description.replace(/<img/gi, '<img class="image-wrap"')

APP.vue里的样式

.image-wrap{
  max-width: 100%;
}

2.直接添加行内样式,相比上面更简单

this.description = this.description.replace(/<img/gi,'<img style="max-width:100%;"')

 

PS: 从设置图片宽度得知,应该能控制rich-text里面所有元素的样式 

/*
 * 1.去掉标签里的style属性
 * 2.给标签添加css样式
*/
let b= "<div style='width:32px;height:33px;font-size:15px'>hello js</div>
b.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/<div/gi, '<div class="ok"');
b => <div class="ok">hello js</div>

 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们