vue文本渲染 v-html

vue

一起分享

vue文本渲染 v-html

v-html会将元素当成HTML标签解析后输出，通常是用于后端返回的富文本的渲染。

 <div v-html="goodsHtml" @click="imagePreview($event)"></div>

1、改变渲染的图片大小

	    let html = res.data.data.info.detail;
        const regex = new RegExp('<img', 'gi');
        let _html = html.replace(
          regex,
          `<img style="max-width: 100%; height: auto"`
        );
        this.goodsHtml = _html;

2、点击富文本中图片放大

// 图片点击放大
    imagePreview(e) {
      console.log('e.currentTarget', e.currentTarget);
      if (e.target.nodeName == 'IMG') {
        console.log(e.target.width);
        console.log(e.target.height);
        // dd.biz.util.previewImage({  //这个是插件，微信也有，这个是钉钉上的
        //   urls: [e.target.currentSrc], //图片地址列表
        //   current: e.target.currentSrc, //当前显示的图片链接
        // })
        ImagePreview([e.target.currentSrc]); // 在此使用了有赞插件
      } else {
        return;
      }
    }