VUE自定义组件封装(图片查看)

			VUE查看图片自定义组件封装

第一次写博客，希望多包涵

一、安装 'v-viewer 组件
npm install v-viewer
二、新建VUE文件
然后引入
import Vue from ‘vue’;
import Viewer from ‘v-viewer’;
import ‘viewerjs/dist/viewer.css’;
export default {
components: {Vue},
name: ‘ViewerImg’,
props:{
imgList:{
type: Array,
default () {
return [];
},
},
size:{
type:Object,
default:{
height:120+‘px’,
width:120+‘px’
},
}
},
data() {
Vue.use(Viewer);
Viewer.setDefaults({
Options: {
inline: false,
button: true,
navbar: true,
title: false,
toolbar: true,
tooltip: true,
movable: true,
zoomable: true,
rotatable: true,
scalable: true,
transition: true,
fullscreen: true,
keyboard: true,
url: “data-source”
}
});
return {
imgList: [],
}

    },
    methods:{
        initImg(){
            if(this.imgList.length<1){
                this.imgList.push("static/img/noImg.jpg");
            }
        },

    },
    mounted() {

    },
    created(){
        this.initImg();
    }

在ui.js里添加
import iView from ‘iview’;
import ‘iview/dist/styles/iview.css’;
Vue.use(iView);

如果要引用。则直接在使用页面引用
import viewerImg from ‘…/…/components/uploadImg/viewerImg’；
components: {viewerImg,},

        </viewerImg>
     注意     imgList:[],是数组