vue-image-preview-component
A vue2.x image preview plugin.
📎 Installation
$ npm i vue-image-preview-component
# or
$ yarn add vue-image-preview-component👽 Usage
main.js:
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
import VueImagePreview from "vue-image-preview-component";
import 'vue-image-preview-component/dist/vue-image-preview.css'
Vue.use(VueImagePreview);
new Vue({
render: (h) => h(App),
}).$mount("#app");App.vue:
<template>
<div id="app">
<button class="btn" @click="open">预览</button>
<VueImagePreview
v-if="isShow"
:bgColor="'rgba(255,255,255,.2)'"
:urlList="imgList"
:onClose="close"
drag
download
></VueImagePreview>
</div>
</template>
<script>
/**
* test
*/
export default {
name: "App",
data() {
return {
imgList: [],
isShow: false,
};
},
methods: {
open(e) {
e.preventDefault();
this.isShow = true;
},
close() {
this.isShow = false;
},
},
};
</script>📁 Options
| key | description | default | type |
|---|---|---|---|
| urlList | The image used when the image is loaded | - | Array |
| bgColor | Overwrite Preview Background | #fff | String |
| drag | Can images be dragged and dropped | false | Boolean |
| download | Can images be downloaded | false | Boolean |
| onClose | Close Preview View | - | Function |