vue img+element-ui的image图片组件实现预览

 <div class="demo-image__preview" v-show="isShow" style="display:block;">
          <img style="width: 100px; height: 100px" :src="file.filePath" title="点击查看大图" @dblclick="look"></img>
           <el-image-viewer v-if="showViewer"  :on-close="closeViewer" :url-list="srcList"/>
        </div>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

components: { ElImageViewer },


  srcList:[],
      showViewer:false

 closeViewer(){this.showViewer=false;},
    look(){
      console.log(1)
      this.showViewer=true;
      console.log(this.showViewer)
      this.srcList[0]=this.file.filePath
      console.log(this.srcList[0])
    },

猜你喜欢

转载自www.cnblogs.com/xymaxbf/p/12470560.html