풍부한 텍스트를 전방에서 어떻게 처리합니까

1: 우선 vue의ref 태그 (예:this.$refs.descriptionInfo.$el.children) 에 따라 풍부한 텍스트 요소의 모든 탭을 가져옵니다
되돌아오는 결과는 하나의 그룹입니다: [0: img, 1: h1 length: 2] 주의: 가져온 그룹은 위조 그룹일 수 있습니다. 인쇄 길이는 0입니다: Collection에length 속성이 있지만 js가 호출할 때length가 0인 문제입니다. 여기에서 얻은 것은 위조 그룹입니다. 이전에 인쇄한 이 그룹을 과장한 것입니다. 보이는 것은 과장된 데이터입니다.통속적으로 말하면 이dom구조가 불러오기도 전에 js가 실행되었다. 해결 방법은dom구조가 불러오기가 끝난 후에 이 그룹을 얻는 것이다.
vue에서this.$사용nextTick (() = > {}) 에서 가져오면 됩니다.
2: 이 그룹을 옮겨다니기
모든 요소를 가져옵니다. 태그 요소의 localName 속성에 따라 태그의 카테고리를 판단합니다. img p h1 div
3: 너비를 예로 들면 먼저 원소의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"
          });
        }
      }
    },

좋은 웹페이지 즐겨찾기