VUE-解决引用vue-photo-previe插件,图片需要刷新才能分组预览的问题

问题描述：

图片预览功能包含在一个通用组件中，循环这个组件，图片无法预览，需要刷新才可以。

1、组件中图片样式部分如下：

<template>
  <div v-if="fenbojilu.length>0">
   ...
      <div class="center">
        <img v-for="(item2,index2) in item.mcrTaskfiles" :key="index2" :src="getImg(item2)" :preview="previewGroup" :onerror="noFindImg"/>
      </div>
   ...
  </div>
</template>

2、组件中引用preview插件

<script>
import Vue from "vue";
import preview from "vue-photo-preview";
import "vue-photo-preview/dist/skin.css";
var option = { bgOpacity: 0.3 };
Vue.use(preview, option);

export default {
  props:{
    // 预览图片的分组
    previewGroup:{
      type:String,
      default:''
    },
    fenbojilu: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      noFindImg: 'this.src="' + require("@/assets/images/img_err.jpg") + '"'
    };
  },
  
  methods: {
    /** 获取图片链接 */
    getImg(item){
      if(item){
        return item['url'];
      }
      return "";
    },
  }
};
</script>

3、页面中循环引用组件

<div v-show="blnShowFeedback">
    <com-feedback-info :previewGroup="'daoda'" :fenbojilu="myFeedbackObj.daoda"></com-feedback-info>
    <com-feedback-info :previewGroup="'zhenggai'" :fenbojilu="myFeedbackObj.zhenggai"></com-feedback-info>
    <com-feedback-info  :previewGroup="'qita'" :fenbojilu="myFeedbackObj.qita"></com-feedback-info>
    <com-feedback-info  :previewGroup="'wancheng'" :fenbojilu="myFeedbackObj.wancheng"></com-feedback-info>
</div>

4、这时候点击图片，无法进行预览，需要在组件com-feedback-info中做如下处理才可以：

mounted(){
    this.$previewRefresh();
    // 异步插入的图片
    // setTimeout(() => {
    //   this.$previewRefresh();
    // }, 1000);
},