element-ui v-html数据渲染的图片点击查看大图

最新推荐文章于 2023-08-07 13:37:06 发布

好吃的不得了

最新推荐文章于 2023-08-07 13:37:06 发布

阅读量762

点赞数 1

文章标签： html 前端 elementui vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44764935/article/details/131491392

版权

废话少说直接放源码：

dom部分：

   <div class="detail-info">
        <div class="detail-info-con">
          <div
            class="detail-lintro"
            v-html="detailContent.content"
            @click="imageChagange($event)"
          ></div>
        </div>
      </div>

   <ElImageViewer
      :on-close="closeViewer"
      v-if="showViewer"
      :url-list="srcListView"
    />

data声明:

data() {
    return {
      detailContent: "",
      showViewer: false,
      srcListView: []
    };
  },

引入element-ui组件:

  components: {
    ElImageViewer: () => import("element-ui/packages/image/src/image-viewer")
  },

点击查看：

  methods: {
    imageChagange(e) {
      if (e.target.nodeName === "IMG" || e.target.nodeName == "img") {
        //判断是否图片标签
        const img = e.target.currentSrc; //获取点击图片地址
        this.onPreview(img);
      }
    },
    //开启富文本图片预览
    onPreview(img) {
      this.srcListView = [img];
      this.showViewer = true;
    },
    //关闭富文本渲染文本图片预览
    closeViewer() {
      this.showViewer = false;
    },

 
  }