vue - picture-viewer 图片查看器组件

<template>

<div class="picture-viewer">

<template v-for="(img,index) in fileList">

<img

:key="index"

:src="img.url"

width="100"

height="100"

style="margin-left :15px;"

@click="openDialog(img)"

>

</template>

<el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" :modal="false">

<img :src="imgUrl" width="100%">

</el-dialog>

</div>

</template>

<script>

export default {

name: "picture-viewer",

data() {

return {

dialogVisible: false,

imgUrl: ""

};

},

props: {

fileList: {

type: Array,

default: () => {

return [];

}

},

title: {

type: String,

default: "上传凭证"

}

},

methods: {

openDialog(img) {

this.dialogVisible = true;

console.log(img);

this.imgUrl = img.url;

}

}

};

</script>