uniapp处理后台传⼊的html代码
1.使⽤v-html
<p class="content" v-html = "t"&t</p>
但是此⽅法不能控制html中图⽚的⼤⼩
2.使⽤rich-text
<rich-text class="content" id="richId"  :nodes="t | formatRichText"></rich-text>
使⽤过滤器控制图⽚，表格等
filters: {
formatRichText(html) { //控制⼩程序中图⽚⼤⼩
let newContent = place(/<img[^>]*>/gi, function(match, capture) {
match = place(/]+"/gi, '').replace(/style='[^']+'/gi, '');
match = place(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = place(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
// newContent = place(/]+"/gi, function(match, capture) {
//    match = place(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
//    return match;
// });
// newContent = place(/<br[^>]*\/>/gi, '');
newContent = place(/\<img/gi,
'<img ');
// newContent = place(/<br[^>]*\/>/gi, '');
// newContent = place(/<td[^<>]*>/ig, '<td >');
// newContent = place(/<td[^<>]*>\s*?<p>/ig, '<td>');
newContent = place(/<table[^>]*>/gi, '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" > return newContent;
}
},
如果想要复制⽂字可以在类中添加
user-select: text;
-
webkit-user-select: text;
但是此⽅法不⽀持a标签的href属性，对于后台传⼊的链接地址可以通过以上代码长按复制，但是对于传⼊的⽂件，前台展⽰的是⽂件名称，因此⽆法通过长按复制复制到⽂件地
址
3.使⽤uParse
将uParse的插件包复制到components中，在需要使⽤的⽂件中导⼊
import uParse from '@/components/u-parse/u-parse.vue'
html href属性<uParse class="content"  :content="t | formatRichText"  @longpress="copy" @navigate="navigate" />
⽅法：
// navigate(href, e) {
// console.log(href,e);
// py(href)
// },
// copy(href){
// uni.setClipboardData({
// data:href,
// success(){
// uni.showToast({
// title:'已复制到剪切板'
// })
// }
// })
/
/ },
通过此⽅法可以复制链接，即可以点击⽂件名将⽂件地址复制到剪切板，但是此⽅法即使使⽤过滤器，后台传⼊的表格，展⽰出来后也是混乱的
4.使⽤mp-html插件
使⽤⽅法
npm ⽅式
1. 在项⽬根⽬录下执⾏
npm install mp-html
在需要使⽤页⾯的(n)vue⽂件中添加
<mp-html :content="html" />
import mpHtml from'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
// 不可省略
components: {
mpHtml
},
data() {
return {
html: '<div>Hello World!</div>'
}
}
}
此⽅法对于表格和⽂件地址均适⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。