基于vue2解决后端传来html标签样式

Bunury

于 2024-03-11 15:03:01 发布

阅读量636

点赞数 8

分类专栏： VUE3 文章标签：前端

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136623848

版权

VUE3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了在Vue应用中，如何接收后端传来的HTML内容，使用v-html渲染时对图片尺寸进行修改，以及通过JavaScript操作DOM来实现不同场景下的图片和视频宽度设置。

摘要由CSDN通过智能技术生成

修改后端传的html标签内图片的样式

实现步骤：

1.发起请求
2.接收数据传data
3.利用v-html渲染div标签
4.created利用js获取元素，进行修改

1.发起请求

  // 根据路由参数获取商品详情数据
    async Getgoodsdata () {
      const {
        data: { detail }
      } = await getprodetailgoods(this.$route.params.id)
      this.detail = detail
      // 轮播图图片设置
      console.log(detail)
      this.images = detail.goods_images
      // 商品广告页设置
      this.content = detail.content
      // 处理后台传的图片px值过大
      const flag = this.content.replace(/414px/g, '370px')
      this.content = flag
    },

2.利用v-html渲染

 <!-- 商品介绍详情 -->
    <div id="jieshao" ref="inp" v-html="content"></div>

3.利用js获取元素，进行修改

//最简单设置 
async created () {
    // 设置img宽度
    setTimeout(() => {
        //先找出图片dom
      console.log(document.querySelector('#jieshao img'))
      document.querySelector('#jieshao img').style.width = '370px'
    }, 1000)
  }

//暴力设置
async created () {
    setTimeout(() => {
      const images = document.querySelectorAll('#jieshao  img')
      for (let i = 0; i < images.length; i++) {
        images[i].style.width = '370px'
      }
    }, 1000)
}

//更加暴力设置
async created () {
    setTimeout(() => {
          //先找出图片dom
      const images = document.querySelectorAll('#jieshao  img')
          //先找出视频dom
      const videos = document.querySelectorAll('#jieshao video')
      for (let i = 0; i < images.length; i++) {
        images[i].style.width = '370px'
      }
      for (let i = 0; i < videos.length; i++) {
        videos[i].style.width = '370px'
      }
    }, 1000)
}