- ImagePreview 图片预览
ImagePreview 图片预览
可以赋值任赋值图片去放大预览(一张缩略图,一张放大图)
TIP
1.0.6+
<div class="imagepreview-1-vue">
<el-button @click="openPreview(0)" style="margin-bottom:20px;">打开图片预览</el-button>
<p>
<img v-for="(d, index) of datas" :src="d.thumbUrl" @click="openPreview(index)">
</p>
</div>
<script>
export default {
data() {
const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
return {
datas: [
{ thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
{ thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
{ thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
]
}
},
methods: {
openPreview(index = 0) {
this.$ImagePreview(this.datas, index);
}
}
}
</script>