如何在元素 ui 中预览图像？

Question

我正在使用元素 ui el-image。我想在单击 (:preview-src-list) 时预览我的图像。但是当我第一次点击时它不会预览任何东西。只需添加我下载的图片。所以我需要点击2次。但是我想点击1次。

这是我的模板代码：

<el-image :src="src"
          :preview-src-list="srcList"
          @click="imgClick"></el-image>

ts代码：

src = null;
srcList = [];

product = 'shoe1';

imgClick() {
  prevImg(product).then(resp => {
    const url = window.URL.createObjectURL(new Blob([resp.data]));
    this.srclist = [url];
  });
}

@Watch("product")
changed(value) {
  getProductImage(value).then(resp => {
    const url = window.URL.createObjectURL(new Blob([resp.data]));
    this.src = url;
  }).catc(e => {
    alert(e);
  });
}

mounted() {
  this.changed(product);
}

Answer 1

我认为这些事情的发生是因为当你点击那个图片时它会触发 clickHandler:

...
  clickHandler() {
    // don't show viewer when preview is false
    if (!this.preview) {
      return;
    }
    ...
  }
...

来自 source

而 preview 是计算出的属性:

...
  preview() {
    const { previewSrcList } = this;
    return Array.isArray(previewSrcList) && previewSrcList.length > 0;
  }
...

来自source

所以第一次点击没有任何反应，但之后你设置 preview-src-list 并再次点击它就可以了。

如果您的代码是同步的，您可以使用像 mousedown 这样的事件，它将在 click 事件之前触发。

<el-image
  :src="url"
  :preview-src-list="srcList"
  @mousedown="loadImages">
</el-image>

Example

但是如果你的代码是异步的，你可以使用 refs 然后调用 clickHandler。

...
  // fetch something
  this.$nextTick(() => {
    this.$refs.elImage.clickHandler()
  })
...

Example

如何在元素 ui 中预览图像？

How to preview image in element ui?

vue.js

vue-component

vuejs2

element-ui