本文主要是介绍微信小程序 rich-text 修改node内部样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
![!](https://www.www.zyiz.net/i/ll/?i=20210707102724753.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzg3NzA5,size_16,color_FFFFFF,t_70)](/upload/202107/07/202107071105554490.png)
<template>
<!-- 商品描述 -->
<view class='ProductDesc'>
<view class="title">— 商品详情 —</view>
<!-- 商品图片 开始 -->
<view class="goodsImg">
<!-- <image class="img"
mode='widthFix'
src='https://img.jdhui.com/sellgoods/images/goods/goodsDetail/goodsImg.png' /> -->
<rich-text class="rich-text"
:nodes='detailImg'></rich-text>
</view>
<!-- 商品图片 结束 -->
</view>
</template>
<script>
export default {
name: "ProductDesc",
components: {},
filters: {},
props: {
detailImgData: {
type: String,
default: ""
}
},
data() {
return {
detailImg: ""
};
},
computed: {},
watch: {
detailImgData(newValue) {
this.detailImg = this.formatRichText(newValue);
}
},
created() {
this.detailImg = this.detailImgData;
},
mounted() {},
methods: {
//调整图片宽度
formatting(detailData) {
this.formatRichText(detailData);
},
//使用正则表达式,添加class类,并将图片宽度100%
formatRichText(html) {
let newContent = html.replace(/<img[^>]*>/gi, function(
match,
capture
) {
match = match
.replace(/style="[^"]+"/gi, "")
.replace(/style='[^']+'/gi, "");
match = match
.replace(/width="[^"]+"/gi, "")
.replace(/width='[^']+'/gi, "");
match = match
.replace(/height="[^"]+"/gi, "")
.replace(/height='[^']+'/gi, "");
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(
match,
capture
) {
match = match
.replace(/<p>/gi, '<p class="p_class">')
.replace(/width:[^;]+;/gi, "max-width:100%;")
.replace(/width:[^;]+;/gi, "max-width:100%;");
return match;
});
//这里可以自己添加类名
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
newContent = newContent.replace(/<a>/gi, '<a class="a_class">');
newContent = newContent.replace(/<li>/gi, '<li class="li_class">');
newContent = newContent.replace(/<p>/gi, '<p class="p_class">');
newContent = newContent.replace(
/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
);
return newContent;
}
}
};
</script>
<style lang='scss'>
view.ProductDesc {
padding-bottom: 101px;
width: 750px;
view.title {
background: #f5f4f0ff;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
line-height: 36px;
color: #666666;
}
view.goodsImg {
background-color: white;
width: 100%;
.img {
width: 100%;
}
.rich-text {
// font-size:500px;
padding: 0;
margin: 0;
.p-parameter-list {
// font-size: 200px;
background-color: #bfa;
// display: flex;
// flex-flow: column;
padding: 0 18px;
// margin: 0;
.li_class {
background-color: orange;
.p_class {
// font-size: 200px !important;
}
}
}
img {
width: 100%;
}
}
}
}
</style>
//格式化文本的方法
formatRichText(html) {
let newContent = html.replace(/<img[^>]*>/gi, function(
match,
capture
) {
match = match
.replace(/style="[^"]+"/gi, "")
.replace(/style='[^']+'/gi, "");
match = match
.replace(/width="[^"]+"/gi, "")
.replace(/width='[^']+'/gi, "");
match = match
.replace(/height="[^"]+"/gi, "")
.replace(/height='[^']+'/gi, "");
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(
match,
capture
) {
match = match
.replace(/<p>/gi, '<p class="p_class">')
.replace(/width:[^;]+;/gi, "max-width:100%;")
.replace(/width:[^;]+;/gi, "max-width:100%;");
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
newContent = newContent.replace(/<a>/gi, '<a class="a_class">');
newContent = newContent.replace(/<li>/gi, '<li class="li_class">');
newContent = newContent.replace(/<p>/gi, '<p class="p_class">');
newContent = newContent.replace(
/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
);
return newContent;
}
这篇关于微信小程序 rich-text 修改node内部样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!