zoukankan      html  css  js  c++  java
  • uni-app生成小程序,v-html的内容用rich-text渲染出来,控制图片宽度

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

    <view class="htmlContianer" v-html="description" />
    
    css部分
    .htmlContianer img{
     max- 100%;
    }

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

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

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

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

    APP.vue里的样式

    .image-wrap{
      max- 100%;
    }

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

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

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

    /*
     * 1.去掉标签里的style属性
     * 2.给标签添加css样式
    */
    let b= "<div style='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>
  • 相关阅读:
    java_db2错误码对应值
    oracle_用户与概要文件
    quartz配置时间
    bzoj2395: [Balkan 2011]Timeismoney
    bzoj2725: [Violet 6]故乡的梦
    bzoj4400: tjoi2012 桥
    双连通分量模板
    bzoj3047: Freda的传呼机 && 2125: 最短路
    bzoj3541: Spoj59 Bytelandian Information Agency
    bzoj1023: [SHOI2008]cactus仙人掌图
  • 原文地址:https://www.cnblogs.com/lucas27/p/14341117.html
Copyright © 2011-2022 走看看