"vue-image-preview": "^0.0.8",用法
时间: 2023-07-08 12:52:13 浏览: 182
vue.js 2.0 图片预览
`vue-image-preview`是一个Vue.js的组件,用于在网页中预览图片。使用该组件需要先安装它:
```
npm install vue-image-preview --save
```
然后,你需要在你的Vue.js应用程序中引入该组件。可以在main.js中全局引入,这样在整个应用程序中都可以使用该组件:
```javascript
import Vue from 'vue'
import VueImagePreview from 'vue-image-preview'
// 引入组件的css文件
import 'vue-image-preview/dist/vue-image-preview.css'
Vue.use(VueImagePreview)
```
在组件中使用`vue-image-preview`:
```vue
<template>
<div>
<img src="path/to/image.jpg" @click="showPreview">
</div>
</template>
<script>
export default {
methods: {
showPreview() {
this.$preview.show({
images: [
{ src: 'path/to/image.jpg' },
{ src: 'path/to/another/image.jpg' }
]
})
}
}
}
</script>
```
这里,我们在点击图片时,调用了`showPreview()`方法,该方法通过`this.$preview.show()`方法调用了`vue-image-preview`组件的预览功能,并传入了需要预览的图片路径。
阅读全文