vue中如何使用 vue-preview 实现图片的预览及缩略

梦里梦外; 2023-07-24 02:50 39阅读 0赞

#### 一、vue-preview 在 vue 中的实践 ####

1.  通过 `npm i vue-preview -S` 命令可以下载 `vue-preview`
2.  在 `main.js` 文件中，去引入 `vue-preview`，并且去使用它，代码如下所示：

// 引入图片预览插件
    import VuePreview from 'vue-preview'
    Vue.use(VuePreview)

1.  在 `data` 中，定义一个 `list` 数组，默认为空数组，用来存放请求数据接口以后获得的缩略图的数据，代码如下所示：

data() { 
        return { 
            list: []
        }
    }

1.  在 `created` 生命周期钩子函数中，调用 `getThumbs()` 方法，`getThumbs()` 可以用来获取缩略图的数，代码如下所示：

created () { 
            this.getThumbs()
    }

1.  在 `methods` 中，定义 `getThumbs()` 方法，获取详情信息的缩略图，调用相应的接口。如果响应的接口状态正确，循环每个图片数据，补全图片的宽和高，然后将完整的数据保存到 `list` 数组中，代码如下所示：

// 获取详情信息的缩略图
        getThumbs() { 
            this.$http.get('api/getthumimages/'+ this.id).then((res) => { 
                if (res.body.status === 0) { 
                    // 循环每个图片数据，补全图片的宽和高
                    res.body.message.forEach(item => { 
                        item.w = 600
                        item.h = 400
                    })
                    // 将完整的数据保存到 list中
                    this.list = res.body.message
                }
            })
        }

1.  在 `vue` 的 `template` 中，去使用 `vue-preview` ，使用 `v-for` 命令进行遍历缩略图的数据，指明对应的`src`地址和高度， `@click="$preview.open(index, list)"` 是实现缩略及预览图的关键，代码如下所示：

<div class="thumbs">
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
        </div>