一:首先根据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"
          });
        }
      }
    },


 

Logo

前往低代码交流专区

更多推荐