# ImagePreview 图片预览
可以赋值任赋值图片去放大预览(一张缩略图,一张放大图)
点击线条即可删除线条
<template>
<div>
<el-button @click="openPreview(0)"
style="margin-bottom:20px;">打开图片预览</el-button>
<p>
<img style="width:200px;margin-right:20px"
v-for="(d, index) of datas"
:src="d.thumbUrl"
:key="index"
@click="openPreview(index)">
</p>
</div>
</template>
<script>
export default {
data () {
return {
datas: [
{ thumbUrl: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg`, url: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg` },
{ thumbUrl: `https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg`, url: `https://www.w3school.com.cn/i/movie.ogg` },
]
}
},
methods: {
openPreview (index = 0) {
this.$ImagePreview(this.datas, index, {
closeOnClickModal: true,
interval: 3000,
click: (data, index) => {
this.$message.success('点击事件' + index)
},
beforeClose: () => {
this.$message.success('关闭回调')
}
});
}
}
}
</script>
显示代码复制代码复制代码