一:首先根据vue中的ref标记(例如:this.$refs.descriptionInfo.$el.children)获取到富文本元素中的所有标签
返回的结果是一个数组:[ 0: img ,1: h1 length: 2 ]
注意:拿到的数组可能是一个伪数组,打印出长度为零:Collection有length属性,但是js调用时length为0的问题,这里获取到的是个伪数组,渲染之前打印的这个数组,看到的是渲染后的数据,通俗的讲 就是这个dom结构还没加载完,js就执行了,解决办法就等dom结构加载完成后再去获取这个数组。
vue中使用this.$nextTick(()=>{})来获取即可
二:遍历该数组
取到每一个元素,根据该标签元素的localName属性来判断该标签的类别:img p h1 div
三:以宽高为例,首先获取到元素的width 和 height ,然后通过if 条件判断,继而给该目标元素 定义需要的样式
注意:碰到图片的缩放问题,可以根据需要通过 img 的 宽度 和 实际需要的宽度 来计算缩放比,继而改变高度的同步缩放
主题思路:获取到目标元素,条件判断样式属性,根据需要来设置目标元素的样式。
getrichWord(){
this.$axios
.get(this.$http + "api/personal/aboutus")
.then(res => {
//console.log(res);
if (res.data.code == 0) {
this.richHtml=res.data.Entity.content;
this.exampleSolve(this.$refs.richHtml);
}
})
.catch(err => {});
},
// 获取目标元素,返回数组
exampleSolve(domele) {
let refEle = domele;
//console.log(domele);
this.$nextTick(() => {
let imgArr = refEle.getElementsByTagName("img");
//console.log(imgArr);
this.handleStyle(imgArr);
let videoArr = refEle.getElementsByTagName("video");
this.handleStyle(videoArr);
//console.log(videoArr);
});
},
// 处理富文本中的img 和 video标签元素
handleStyle(ele) {
let elem = ele;
let maxWidth = $(".componayIntro").width();
let ratio = 0;
for (let i = 0; i < elem.length; i++) {
//console.log($(elem[i]).width(), maxWidth);
if ($(elem[i]).width() > maxWidth) {
//console.log(elem[i]);
ratio = $(elem[i]).width() / maxWidth;
var height = $(elem[i]).height() / ratio;
//console.log($(elem[i]).height(), ratio);
$(elem[i]).css({
width: maxWidth + "px",
height: height + "px",
margin: "0 auto",
display: "block"
});
//console.log($(elem[i]).width());
} else if ($(elem[i]).width() < maxWidth) {
ratio = $(elem[i]).width() / maxWidth;
var height = $(elem[i]).height() / ratio;
$(elem[i]).css({
width: maxWidth + "px",
height: height + "px",
margin: "0 auto",
display: "block"
});
}
}
},