• ImagePreview 图片预览

    ImagePreview 图片预览

    可以赋值任赋值图片去放大预览(一张缩略图,一张放大图)

    TIP

    1.0.6+

    ImagePreview 图片预览 - 图1

    1. <div class="imagepreview-1-vue">
    2. <el-button @click="openPreview(0)" style="margin-bottom:20px;">打开图片预览</el-button>
    3. <p>
    4. <img v-for="(d, index) of datas" :src="d.thumbUrl" @click="openPreview(index)">
    5. </p>
    6. </div>
    7. <script>
    8. export default {
    9. data() {
    10. const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
    11. return {
    12. datas: [
    13. { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
    14. { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
    15. { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
    16. ]
    17. }
    18. },
    19. methods: {
    20. openPreview(index = 0) {
    21. this.$ImagePreview(this.datas, index);
    22. }
    23. }
    24. }
    25. </script>